Achieving This Hr Element with CSS Styling - Pseudo Elements

Achieving this hr element with CSS styling - pseudo elements

You can use :

1. one pseudo to draw the 2 rounds, first round is drawn with borders,
   the second is its shadow.
2. another pseudo to bring in the image.

http://codepen.io/gcyrillus/pen/dHaus

hr {
  border: 0 solid #eeedef;
  border-top-width: 1px;
  height: 0;
  margin: 60px auto;
  clear: both;
  display: block;
  width: 400px;
  position: relative;
}
hr:before {
  content: " ";
  width: 5px;
  height: 5px;
  position: absolute;
  border-radius: 5px;
  border: 1px solid #aaa;
  background-color: #999;
}
hr:before {
  left: 0;
  bottom: -3px;
box-shadow: 400px 0 0 -1px #999, 400px 0 0 0 #aaa;
}
hr:after {
  content:url(http://lorempixel.com/50/50/cats/2);
  display:block;
  position:absolute;
  left:50%;
  height:50px;
  width:50px;
  margin:-25px 0 0 -25px;
  border-radius:50px;
  overflow:hidden;
  box-shadow: 0 0 0 1px #eef, 0 0 5px;
}
 
body {background:#789}

<hr/>

Trying to style an hr tag to have end caps

Here you go. https://jsfiddle.net/mkarajohn/sfr5kw4e/

hr {
  height: 4px;
  background: black;
  border: none;
  position: relative
}

hr::before,
hr::after {
  position: absolute;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: black;
  bottom: -4px;
}

hr::before {
  left: 0;
}

hr::after {
  right: 0;
}

Think if you really need an hr though, instead of a simple div

Adding hr/ using the :after selector

This is impossible with pure CSS, but you could use a border and margins to look like a hr:

article {
    margin: 3px 0px; 
    border-bottom: 1px solid black;
}

Or you could use JavaScript:

var articles = document.getElementsByTagName('article')
for (var i = 0; i < articles.length; i ++) {
    articles[i].parentNode.insertBefore(document.createElement('hr'), articles[i].nextSibling)
}

Or easier in jQuery:

$('article').after('<hr/>')

Apply different text headings to html hr element with the same class

Use nth-child() on the div element:

hr.stepheading:after{
    content: "The First Step";
    position: relative;
    top: -0.7em;
    display: inline-block; 
    /* Other details */
}

div:nth-child(2) hr.stepheading:after{
    content: "The Second Step";
}
div:nth-child(3) hr.stepheading:after{
    content: "The Third Step";
}
div:nth-child(4) hr.stepheading:after{
    content: "The Fourth Step";
}​
​

Demo: http://jsfiddle.net/bQBgL/4/

Use before & after Pseudo-element to make a line

You don't need both :before and :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.

#header {

    width: 100%;

    height: 50px;

    margin: 50px 0;

    text-align: center;

    font-size: 28px;

    position: relative;

    background-color: #57585C;

}

#header:after {

    content: '';

    width: 100%;

    border-bottom: solid 1px #fff;

    position: absolute;

    left: 0;

    top: 50%;

    z-index: 1;

}

h3 {

    background-color: #57585C; /* Same as the parents Background */

    width: auto;

    display: inline-block;

    z-index: 3;

    padding: 0 20px 0 20px;

    color: white;

    position: relative;

    font-family: calibri;

    font-weight: lighter;

    margin: 0;

}

<div id="header">

   <h3>Last Projects</h3>

</div>

How to style half of my hr s differently from the other half?

For the <hr> line you can use the css :before pseudo-element to make the differently-colored area (please change colors and sizes to match your design):

hr {

    background-color: #555;

    border: none;

    display: block;

    height: 4px;

    overflow: visible;

    position: relative;

    width: 100%;

}

hr:before {

    background-color: #f90;

    content: '';

    display: block;

    height: 8px;

    left: 0;

    position: absolute;

    top: -2px;

    width: 20%;

    z-index: 1;

}

<hr>

How to style this hr with image and text in the middle?

Actually you don't need a <hr /> at all here. You can just use pseudo elements and make it possible:

* {

  font-family: 'Segoe UI';

  font-weight: normal;

}

h1 {

  text-align: center;

}

h1 span {

  background-color: #fff;

  padding: 15px;

}

h1::after {

  display: block;

  content: "";

  border: 1px solid #ccc;

  margin-top: -0.5em;

}

<h1><span>Hello</span></h1>

Changing CSS pseudo-element styles via JavaScript

EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable.

The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes. An example to hide the scrollbar:

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

To later remove the same class, you could use:

document.getElementById("editor").classList.remove('hidden-scrollbar');

How to make an HR element to be the same width of a text above it

A better way would be to use the hr styles as a pseudo element of the text you want to apply it to. Here's an example.

.hr {

  display: inline-block;

}

.hr:after {

  content: '';

  display: block;

  border-top: 6px solid blue;

  margin-top: 0.5em;

}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row text-center">

    <h1>HEADER 1</h1>

  </div>

  <div class="row text-center">

    <h1 class="hr">LARGER HEADER LIKE THIS</h1>

  </div>

</div>

---

Related Topics