CODEWITHSUNDEEP
cssborder
becky armstrong
becky armstrong

Reputation: 93

Add icon to end of css border

I need to add an icon to the end of a solid border, and for that icon to be responsive (i.e. as the border gets bigger/smaller, the icon remains at the end of the line).

This first image is what I have now. enter image description here

Here is my code:

<h3>Open Enrollment</h3><img src="../img/icons/icon_OpenEnrollment.png" class="header-icon">


h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}

.header-icon {
    float: right;
}

This is what I need to create. enter image description here

Upvotes: 1

Views: 7073

Answers (6)

GosiaP
GosiaP

Reputation: 11

Add img as background-img as pseudoelement of h3(::after) :) 

h3 {border-bottom: 1.5px solid #f1a327; position: relative;}
h3:after {
     content: '';
    position: absolute;
    background-image: url(https://image.ibb.co/ibDnXK/circ.png);
    display: block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: calc(50% - 10px);
}
<h3>Open Enrollment</h3>

Upvotes: 1

jwebb
jwebb

Reputation: 1149

You could try something like this. There are a few options. Using ems accounts for varying font-sizes across devices.

h3 {
  width:90%;
  display:inline-block;
  line-height:1em;
}
h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}

.header-icon {
    float: right;
    width:10%;
    position:absolute;
    right:0;
    top:2em;
}

Upvotes: 0

Nacorga
Nacorga

Reputation: 526

Try this:

.header {
  width: 100%;
  position: relative;
 }
 
 .header h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}
 
 .header .header-icon {
   position: absolute;
   top: 0;
   right: 0;
   background: #fff;
 }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="header">
  <h3>Open Enrollment</h3>
  <i class="fab fa-adn fa-3x header-icon"></i>
</div>

Upvotes: 0

Swink
Swink

Reputation: 448

By subtracting margin-top from the icon (added my own) , I believe I achieved the effect you were looking for.

Instead of a regular border, I wrapped a span class and img class within a div. In the span class, I gave it a width and background color, simulating a border.

You can edit the margin of the img if you want to have the border appear closer or more far away from your img. By Having the Img float: right, the border won't appear to go through the image. 

div{
  display:inline-flex;
  flex-direction:row;
}
#border {
  
    width:400px;
    height:0;
    justify-content:center;
    border: 1.5px solid #f1a327;
   
    
}
img{
  height:40px;
  width:45px;
  float:right;
  margin-top:-20px;
  margin-left:1em;
}
  <h3>
  Open Enrollment
  </h3>
<div>

  <span id = "border"></span>
  <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" class="header-icon">
</div>

Upvotes: 0

suraj13k
suraj13k

Reputation: 416

h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
    z-index: -1;
}

.header-icon {
    float: right;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<h3>Open Enrollment<span><img style="height:40px;" src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Online-Shopping-512.png" class="header-icon"></span></h3>


</body>
</html>

Upvotes: 0

chintuyadavsara
chintuyadavsara

Reputation: 1569

position:relative to the .header-icon class and top:-40px and left:-10px It works

h3:after {
  content: ' ';
  display: block;
  border: 1.5px solid #f1a327;
  position: relative;

}

.header-icon {
  position:relative;
  float: right;
  top:-40px;
  left:-10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<h3>Open Enrollment</h3><img style="width:40px"src="https://cdn0.iconfinder.com/data/icons/tutor-icon-set/512/set_of_three_books-512.png" class="header-icon">

</body>
</html>

Upvotes: 1

Related Questions