title: How to create a border-bottom in CSS using a text character such as a dash, letter or number
body: <p>Is there a way to create a bottom-border out of a text character e.g. could I have a <code>border-bottom</code> of "XXXXXXXXXXXXXXXXXX" or "---------------------"? </p>
  
  <p>As I understand it, I can create a bottom-border using CSS with a repeated image or with a rule (e.g. border-solid). </p>
  
  <p>I realize I could do something like <code>border-bottom: thick dotted</code> to achieve a dotted line effect, but I want the border to be in a particular font, so that doesn't help me. </p>
  
  <p>Basically, what I want to have is a header that looks like this in a custom font 
  <a href="https://i.stack.imgur.com/DUTw5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DUTw5.png" alt="enter image description here"></a></p>
  
  <p>Here's what I'm starting with:</p>
  
  <pre><code>h1 { 
      font-family: 'Special Elite', cursive; font-size: 2em;
      padding-bottom: .2em; 
      border-bottom: ?????????;
      margin-top: 0;
      margin-bottom: 1.7em;
  }
  </code></pre>
  
  <p>I may be going about this the wrong way -- any help is greatly appreciated. </p>