CODEWITHSUNDEEP
htmlcssfonts
user44252
user44252

Reputation: 43

How to create a border-bottom in CSS using a text character such as a dash, letter or number

Is there a way to create a bottom-border out of a text character e.g. could I have a border-bottom of "XXXXXXXXXXXXXXXXXX" or "---------------------"?

As I understand it, I can create a bottom-border using CSS with a repeated image or with a rule (e.g. border-solid).

I realize I could do something like border-bottom: thick dotted to achieve a dotted line effect, but I want the border to be in a particular font, so that doesn't help me.

Basically, what I want to have is a header that looks like this in a custom font enter image description here

Here's what I'm starting with:

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

I may be going about this the wrong way -- any help is greatly appreciated.

Upvotes: 1

Views: 2870

Answers (4)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53597

Contrary to all the other answers give: yes, this is entirely possible using CSS image borders: use an SVG "image" with whatever text you want to use as border. Create an SVG along the lines of:

<svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
  <text x='0' y='...lineheight...'>xxxx...xxxxx</text>
  <!-- and then use <g transform=...> to create three more
       copies of this line, so that it acts as border -->
<svg>

And then use use CSS borders (slotting your SVG code, without newlines, into the ... part):

.bordered {
  border: 10px solid transparent;
  border-image: url("data:image/svg+xml;utf8,...") 1 stretch;
}

And there we go. I didn't do the full SVG, but an example is here: http://jsbin.com/xizuyuzode/edit?html,css,output

Read up the CSS image borders syntax, and play around with the SVG for more refined results.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105933

Your idea seems fine to me (i see no CSS alternative else than using an image ), you could even use different color starting from a length that could be repeated via text-shadow:snippet screenshot

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

Upvotes: 4

Aziz
Aziz

Reputation: 7783

I would recommend using an image but if you really wanted to use actual characters, you can do something crazy like this:

@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);

body {font-family: 'Dancing Script', cursive;}

h1 {color:red;}

h1:after {
 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
}

h2 {color:orange; font-family: 'Anonymous Pro';}
h2:before, h2:after {
 content:"=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
}

h3 {font-family: 'Abril Fatface'; color:black; text-align: center;}

h3:before, h3:after {
 content:"ABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZ";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
  margin:10px auto;
}
<h1>Damn, Border!</h1>

<h2>Back at it again!</h2>

<h3>ALL THESE LETTERS</h3>

jsFiddle: https://jsfiddle.net/azizn/89og4bg2/

Basically we add a pseudo selector that acts as a "border", you can style it anyway you want. Adding overflow:hidden makes sure it does not create weird scrollbars.

Upvotes: 2

dippas
dippas

Reputation: 60563

you can use pseudo-element :after

h1 {
  font-size: 1em;
  position: relative;
  margin:50px 0
}
h1:after {
  content: "-------------------------------------------------------------";
  position: absolute;
  bottom: -20px;
  left: 0
}
.arial {
  font-family: Arial
}
.cursive {
  font-family: cursive
}
<h1 class="arial">this has to be dashed underline</h1>
<h1 class="cursive">this has to be dashed underline</h1>

Upvotes: 2

Related Questions