css - 使中心对齐文本的边框底部跨度宽度

Question

我希望我的p文本下方有一条跨越文本宽度的虚线，我也希望p水平居中。

文本永远不会超过一行，但该行的长度会有所不同（如果它完全固定，我可以很容易地解决这个问题）。

我无法完全弄清楚解决方案。我有以下结构：

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

在我的 CSS 中，我有这样的东西：

        .container      {
                    width: 650px;
                    height: 100px;
                    }

    .content    {
                    text-align: center;
                    text-transform: uppercase;
                    font-size: 26px;
                    color: #4D4D4D;
                    }

        p           {
                    border-bottom: #808080;
                    border-bottom-width: thin;
                    border-bottom-style: dotted;            
                    }

Answer 1

这里：http: //jsfiddle.net/DqFp7/

HTML

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

CSS

.container {
    width: 650px;
    height: 100px;
}

.content {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    color: #4D4D4D;
}

p {
    border-bottom: #808080;
    border-bottom-width: thin;
    border-bottom-style: dotted;  
    display:inline;    
}​

Answer 2

您可以将text-decorationCouples 与 结合使用text-decoration-style，尽管对此功能的支持仍然有些差（2018 年 8 月：Safari 和 Edge 中不支持）。

它在规范中，因此最终会得到支持。

.

例子：

.container,
.content {
  width: 100%;
}

.content p {
  font-size: 30px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-align: center;
}

<div class="container">
  <div class="content">
    <p>This is the title</p>
  </div>
</div>