html - 如何使用破折号、字母或数字等文本字符在 CSS 中创建底部边框

Question

有没有办法用文本字符创建底部边框，例如我可以使用“XXXXXXXXXXXXXXXXXX”或“--------------------”的 border-bottom 吗？

据我了解，我可以使用带有重复图像或规则(例如 border-solid)的 CSS 创建底部边框。

我知道我可以做一些像 border-bottom: thick dotted 这样的事情来实现虚线效果，但我希望边框使用特定的字体，所以这对我没有帮助。

基本上，我想要的是一个看起来像这样的自定义字体的标题

这是我的开头:

h1 { 
    font-family: 'Special Elite', cursive; font-size: 2em;
    padding-bottom: .2em; 
    border-bottom: ?????????;
    margin-top: 0;
    margin-bottom: 1.7em;
}

我可能会以错误的方式解决这个问题——非常感谢任何帮助。

Answer 1

你的想法对我来说似乎很好(我认为除了使用图像之外没有其他 CSS 替代方案)，你甚至可以从可以通过文本阴影重复的长度开始使用不同的颜色:

h1 {
  font-family: 'Special Elite', cursive;
  position:relative;
  overflow:hidden;
  padding-bottom:0.5em;
  }
h1:after {
  position:absolute;
  line-height:0.5em;
  bottom:0;
  left:0;
  right:0;
  white-space:pre;
  content:'-     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     ';
  text-shadow: 0.7em 0 tomato, 1.4em 0 turquoise;
  }
  
  hr + h1:after {
     text-shadow: 0.7em 0.2em tomato, 1.4em -0.2em turquoise;
    }

<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<h1>Unit 1 - Introductions</h1>
<hr/>
<h1>Up & down </h1>

codepen to play with