Why the text appears on the line

Question

Why the text appears on the line with I tried to make a white background for the content like this? I want a solution like this https://ibb.co/tXn4tHf

but this is the problem: https://ibb.co/Q8jtZwk

I want a solution to this problem

.section-title {
 color: #aaa;
 font-size: 15px;
 font-weight: 600;
 margin: 30px 0;
 overflow: hidden;
 position: relative;
 text-align: center;
 text-transform: uppercase;
 width: 100%
 
}

.section-title:after,
.section-title:before {
 background-color: #aaa;
 content: '';
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%
}

.section-title:before {
 left: .5em;
 margin-right: -50%
}

.section-title:after {
 right: .5em;
 margin-left: -50%
}

<h4 class="section-title">جميع قوائمك</h4>

That is because of the pseudo-elements with h4. Try using top property in your after and before. — Tal, Aug 30 '19 at 08:28

little_coder · Answer 1 · 2019-08-30T07:18:52.587

3

Or you can just add span to your text. Then change your css style MORE SIMPLIER.

.section-title {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #aaa; 
   line-height: 0.1em;
   margin: 10px 0 20px; 

} 

.section-title span { 
    background:#fff; 
    padding:0 10px; 
    color: #aaa;
}

<h4 class="section-title"><span>جميع قوائمك</span></h4>

edited Aug 30 '19 at 07:18

answered Aug 30 '19 at 07:14

little_coder

564
3
13

2

I like this more than my solution. Thumbs up – Tim Gerhard Aug 30 '19 at 07:17

score 0 · Answer 2 · answered Aug 30 '19 at 07:08

One easy way to do this would be to decrease the width of the lines. I changed it to 42% to look approximately as in your example. (to make it responsive, use media-queries and change the percentage value). I assume there would also be some other approaches to this but I think this one is the easiest to understand.

By the way: The reason a smaller percentage value works is because 50 + 50 equals 100%, so if the left part is 50% wide and the right part too, your lines will add up to 100% width.

.section-title {
    color: #aaa;
    font-size: 15px;
    font-weight: 600;
    margin: 30px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 100%
}

.section-title:after,
.section-title:before {
    background-color: #aaa;
    content: '';
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 42%;
}

.section-title:before {
    left: .5em;
    margin-right: -50%
}

.section-title:after {
    right: .5em;
    margin-left: -50%
}

<h4 class="section-title">جميع قوائمك</h4>

score 0 · Answer 3 · answered Aug 30 '19 at 07:14

.section-title{
  display:flex;
  justify-content:center;
  position: relative;
}

.section-title:after{
  content: '';
  position:absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: red;
}

.section-title span{
  background-color: white;
  position:relative;
  z-index: 1;
  padding: 0 2px;
  text-align: center;
}

<h4 class="section-title">
  <span>Title<Span>
</h4>

score 0 · Answer 4 · answered Aug 30 '19 at 07:18

0

Do these changes.

<h4 class="section-title"><span>جميع قوائمك</span></h4>

css :-

.section-title span {
    position: relative;
    z-index: 1;
    padding: 0 5px;
}

Let me know if you have any doubt.

answered Aug 30 '19 at 07:18

Piyush Jain

1,895
3
19
40

Why the text appears on the line

4 Answers4