Html Question

[Modico]

Hey Everyone

I have a quick question about a html-code, I want to transform the first picture into the second picture. I have added the html code down belown.

1.

2.

Code: 

<p style="text-align: center; "><span style="font-size: 12pt; text-transform: uppercase;"><strong>our standards</strong></span></p>
<hr>

Thanks in advance!

[Modico · Accepted solution]

Hey Everyone

Here's the solution for anyone who needs it (btw. ChatGPT fixed this issue for me):

<p class="trennlinie-text">
  <span class="trennlinie"></span>
  <span style="font-size: 20px;">OUR STANDARDS</span>
  <span class="trennlinie"></span>
</p>

<style>

.trennlinie-text {
  position: relative;
}

.trennlinie-text::before {
  content: "";
  position: absolute;
  right: 0;
  width: 42%;
  height: 1px;
  background-color: black;
}

.trennlinie-text::after {
  content: "";
  position: absolute;
  left: 0;
  width: 42%;
  height: 0.5px;
  background-color: black;
}

.trennlinie-text::before {
  top: 16px;
}

.trennlinie-text::after {
  bottom: 16px;
}

</style>

[Khanzain4593]

If you want to transform the first picture into the second picture, you can modify the HTML code as follows:
<p style="text-align: center; margin-top: 20px; margin-bottom: 20px;"><span style="font-size: 24pt; text-transform: uppercase; border-bottom: 2px solid black; padding-bottom: 5px;"><strong>our standards</strong></span></p>

Explore comprehensive insights on this topic by checking out the CCS training offered by Iqra Technology please refer Iqra technology website For more in-depth details, visit their platform to enhance your understanding.