Psuedo Element两行问题

Question

我在我的网页标题上使用Pseudo元素作为下划线但是当屏幕尺寸减小时它无法正常工作 这是我的CSS代码和截图

 .section-title {
    text-align: center;
    position: relative;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
    }
    .section-title:after {
    display: block;
    position: absolute;
    content: ' ';
    border-bottom: solid 5px #2874f0;
    top: 40px;
    width: 50px;
    left: 50%;
    margin-left: -25px;
 }

Answer 1

Try this,

.section-title {
    text-align: center;
    position: relative;
    color: #000;
    padding-bottom: 10px;
    text-transform: uppercase;
    }
    .section-title:after {
    display: block;
    position: absolute;
    content: ' ';
    border-bottom: solid 5px #2874f0;
    bottom: 0px;
    width: 50px;
    left: 50%;
    margin-left: -25px;
 }

Answer 2

有两种方式可以想到：

1. 将<br>放在一个h*标记中以生成多行并添加此CSS属性：

   text-decoration:underline;  
   

2. 使用多个h*代码并按照您已经完成的方式应用border-bottom。另外，要控制垂直间距，请使用以下内容：

   line-height: 30px;
   padding:0;
   display:table;
   

演示

<小时/>

h1.A {
  text-decoration: underline;
  text-align: center
}

h1.B {
  border-bottom: 3px solid #000;
  line-height: 30px;
  padding:0;
  display:table;
  margin: auto;
}

<h1 class='A'>Three<br>Line<br>Title</h1>


<h1 class='B'>Three</h1>
<h1 class='B'>Line</h1>
<h1 class='B'>Title</h1>