How can I make a line like this through my circle thumbnail pic?

[gtrman97]

Business Card

[jsdisco]

There’s lots of ways.

• create a <div> with width, height and background-color
• use pseudo elements ::before or ::after with width, height and background-color
• use a border-top or border-bottom on an element
• use a horizontal line <hr />

All of the above require that you set position:absolute on the element that represents the line.

[gtrman97]

When I use position: absolute for either border-top or <hr> it makes the line disappear inside the div for this project.

[jsdisco]

If you use position:absolute, you also have to set the parent element to position:relative (that would be your #card). Also, set a width on the <hr> and use the top property for positioning, like this:

hr {
  position: absolute;
  top:70px;
  width:100%;
}

[gtrman97]

Ok but now it’s on top of the image I want it through the thumbnail circle but behind the image circle.

[jsdisco]

I’ll just throw in the solution because I can’t see what you’ve tried (or if you’ve tried anything at all).

Add a div to your HTML to hold the image, and a div for that line:

    <div id="background">
      <div class="avatar">
        <div class="line"></div>
        <img src="thumbnail_Photo.jpg">
      </div>
      <p><strong>Andrew K</strong> 31 <span>Austin</span></p>
    </div>

CSS for the avatar div and the line:

.avatar {
  position:relative;
}
.line {
  width:100%;
  height:2px;
  background:black;
  position:absolute;
  top:50%;
  z-index:-1;
}