0

I'm using Foundation 6 (just a little bit of background) and in a project, several titles are styled this way:

the title with a blue border

You can ignore the brigther blue background. It's possible to make that border that covers the title using anything in CSS? I'm currently using this file as a SVG, but I know this is not SEO/acessible friendly, and I really think .svg is more a hack than the actual solution.

I don't know if the solution resides on:

border-bottom: solid 1px blue;

Or something else?

Yeltsin Lima
  • 23
  • 6
  • Just answering my own question to help other people. This solution from the other question helped me: https://stackoverflow.com/a/26002281/12699767 And for the width to be the same as the title content, I used `display: table;` – Yeltsin Lima Mar 17 '21 at 14:12

2 Answers2

3

https://jsfiddle.net/32yahu0v/

h1::before{
  z-index: -1;
  content: " ";
  width: 120px;
  position: absolute;
  padding-top: 20px;
  border-bottom: 15px solid blue;
}
<h1>
 My Title
</h1>
Martin Osusky
  • 820
  • 1
  • 6
  • 15
2

You can use border-bottom for that to work, but there will be a gap.

If you want the line to go through the the text, you could try and use a :before or :after pseudo element on the title

here is a codepen https://codepen.io/Spoochy/pen/QWGPoPZ

/* the styling that you actually need */
p {
  position: relative;
}

p:after {
  content: '';
  background: blue;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 10px;
  z-index: -1;
}

/* styling to make everything prettier and you don't need*/
body {
  background: #29b5e8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

p {
  color: white;
  font-size: 35px;
  font-family: sans-serif;
  position: relative;
}
<p>conectamos</p>
Spoochy
  • 321
  • 1
  • 7
  • @Paulie_D demonstration has been added – Spoochy Mar 16 '21 at 19:23
  • @Paulie_D I've updated the answer – Spoochy Mar 16 '21 at 19:33
  • Hey, I don't know why but the z-index thing just don't works. https://i.imgur.com/ReTCoGa.png Both your example and @martin-osusky has the same result. I put a z-index on the div itself, just for test. But again, it doesn't work. Here is a codepen with my code (I just changed the description and photo because NDA): https://codepen.io/yeltsinslima/pen/gOLyyVE – Yeltsin Lima Mar 16 '21 at 20:23
  • @YeltsinLima the z-index in the after pseudo element has to be a negative value. otherwise it won't go behind – Spoochy Mar 16 '21 at 21:21