Добавить значок в конец границы CSS - PullRequest
Новая
       5

Добавить значок в конец границы CSS

0 голосов
/ 19 сентября 2018

Мне нужно добавить значок в конец сплошной границы, и этот значок должен быть отзывчивым (то есть, когда граница становится больше / меньше, значок остается в конце линии).

Это первое изображение, которое у меня сейчас есть. enter image description here

Вот мой код: 

<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;
}

Это то, что мне нужно создать. enter image description here

Ответы [ 6 ]

0 голосов
/ 19 сентября 2018

Вы можете попробовать что-то вроде этого.Есть несколько вариантов.Использование учетных записей ems для разных размеров шрифтов на разных устройствах. 

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;
}
0 голосов
/ 19 сентября 2018 

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>
0 голосов
/ 19 сентября 2018

Добавить img в качестве background-img в качестве псевдоэлемента 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>
0 голосов
/ 19 сентября 2018

Вычитая margin-top из иконки (добавил свою), я считаю, что достиг эффекта, который вы искали.

Вместо обычной границы я обернул класс span и класс img в div.В классе span я дал ему width и background color, имитирующие границу.

Вы можете редактировать поле img, если хотите, чтобы граница отображалась ближе или дальше от вашегоIMG.Имея Img float: right, граница не будет проходить через изображение.

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>
0 голосов
/ 19 сентября 2018

Попробуйте это: 

.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>
0 голосов
/ 19 сентября 2018

position:relative до .header-icon класса и top:-40px and left:-10px Работает 

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>
...