css - 将图标添加到 css 边框的末尾

标签 css border

我需要在实线边框的末尾添加一个图标,并且要使该图标响应(即当边框变大/变小时,图标会保留在该行的末尾)。

第一张图片就是我现在的样子。 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

最佳答案

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>

关于css - 将图标添加到 css 边框的末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52407765/

相关文章:

border - 如何在此元素内添加边框?

html - 高度自动时CSS边框崩溃

javascript - 在侧边栏中选择特定菜单时更改菜单背景颜色

javascript - 强制页面内容为视口(viewport)的 100%

jquery - 如何建立分辨率独立的网站?

css - 如何阻止 richfaces 向面板和日历添加边框?

html - 在边框图像中添加多个渐变?

jquery - css 溢出问题 : hidden property

html - 悬停时转换 div 时导航弹跳

CSS :focus border transition won't work when a border-bottom is already set