时间戳

首页 > 解决方案 > 我怎样才能使这条线在后面的部分居中？- CSS

html - 我怎样才能使这条线在后面的部分居中？- CSS

问题描述

我希望将这条线放在标题下方的中间，但是当我尝试 text-align 时它不起作用。

body {
    background-color: #000;
    color: #FFF;
    font-family: 'Noto Sans KR', sans-serif;
}

.title{
    position: relative;
    top: 70px;
    line-height: 15px;
    letter-spacing: 1em;
    font-size: 30px;
    display: block;
    text-align: center;
}

.title::after {
    display: block;
    width: 300px;
    height: 20px;
    border-bottom: 3px solid #FFF;
    content: "";
    color: #FFF;
    text-align: center;
}

在此处输入图像描述

很抱歉，因为现在还不是我点击推荐的时候。感谢您的所有回答。

标签： htmlcss

解决方案

这会吗？

body {
    background-color: #000;
}

section {
  position:relative;
}

.title{
    color: #fff;
    line-height: 15px;
    letter-spacing: 1em;
    font-size: 30px;
    display: block;
    text-align: center;
    border-bottom-width: 50%;
}

.title::after {
  position:absolute;
  display: block;
  width: 300px;
  height: 20px;
  border-bottom: 3px solid #FFF;
  content: "";
  color: #FFF;
  text-align: center;
  left: 25%;
}
<body>
  <section>
    <div class="title">What I Play</title>
  </section>
</body>

推荐阅读