Is it possible to make a text inside horizontal line like i'm doing?-CodePudding

I don't get it what i doing wrong here. I want the small text to look a like the big one without fixed values (run the snipped to see)

Have some way to do this that don't involves text being surrounded by two pseudo-elements?

.ruler {
border-bottom: 1px solid black;
text-align: center;
height: 0px;
}

.text1 {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 12px;
}

.text2 {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
}

<div >
<span >MyText</span>
</div>
<br />
<br />
<div >
<span >MyText</span>
</div>

CodePudding user response：

I am curious to what you mean by I want the small text to look a like the big one without fixed values (run the snipped to see) I have an example of making them the same. Can you please provide some clarification below if this is not what you are looking for? Possibly a screenshot example of what you are looking for in your original question may be the most helpful.

.ruler {
border-bottom: 1px solid black;
text-align: center;
height: 0px;
}

.text {
background-color: white;
padding: 0px 2px;
transform: translateY(-50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
}

<div >
  <span >MyText</span>
</div>

<br />

<div >
  <span >MyText</span>
</div>

CodePudding user response：

you can use

::after or ::before

.title {
      width: 100%;
      text-align: center;
      position: relative;

}
.title::before {
     content: '';
     z-index: -1;
     width: 100%;
     height: 2px;
     background: #000;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}


span.text2 {
     font-size: 18px;
     background: #fff;
}

<div >
  <span >MyText</span>
</div>

I used :

:before

it's relative to the div that has the span, I center it with top, left, and transform properties will make it however the size of the span, it will be always in the center

Note: that it's a line passing through the whole div, so I gave the span background so it will cover it, and give you the possibility to control the padding from the text and line

hope it's useful

CodePudding user response：

sorry for all the confusion, eventually i solved my problem going the other way arround

I would delete this hole question to hide my stupidity and add this answer to a related question, but i can do neither. Whatever... heres the answer

.ruler {
border-bottom: 1px solid black;
text-align: center;
}

.text1 {
background-color: white;
padding: 0px 2px;
transform: translateY(50%);
display: inline-block;
font-weight: 500;
font-size: 12px;
padding-top: 2px;
}

.text2 {
background-color: white;
padding: 0px 2px;
transform: translateY(50%);
display: inline-block;
font-weight: 500;
font-size: 16px;
padding-top: 2px;
}

<div >
<span >MyText</span>
</div>
<br />
<br />
<div >
<span >MyText</span>
</div>

the padding-top 2px it's act's the same with all text sizes, because it's to compensate the border size