seo Question posted in
Some basic information to get you started with this can be found here.

Title with border, but without background? – SEO

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search