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

我需要在实心边框的末尾添加一个图标，该图标才能响应（即，当边框变大/变小时，图标仍保留在线条的末尾）

这是我现在看到的第一张图片。

这是我的代码：

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

开放注册
h3：之后{
内容：''；
显示：块；
边框：1.5px实心#f1a327；
位置：相对位置；
}
.标题图标{
浮动：对；
}

这就是我需要创建的内容。

---

位置：相对于
。标题图标
类和
顶部：-40px和左侧：-10px
工作


h3:after{
内容：''；
显示：块；
边框：1.5px实心#f1a327；
位置：相对位置；
}
.标题图标{
位置：相对位置；
浮动：对；
顶部：-40px；
左：-10px；
}

JS-Bin
公开招生
试试这个：


.header{
宽度：100%；
位置：相对位置；
}
.标题h3：之后{
内容：''；
显示：块；
边框：1.5px实心#f1a327；
位置：相对位置；
}
.标题.标题图标{
位置：绝对位置；
排名：0；
右：0；
背景：#fff；
}

公开招生
通过从图标（添加了我自己的图标）中减去
页边空白顶部
，我相信我达到了您想要的效果

我将span类和img类包装在一个div中，而不是常规的边框。在span类中，我给它一个
宽度
和
背景色
，模拟边框

如果希望边框显示得离您的img更近或更远，您可以编辑img的边距。通过使用Img
float:right
，边框看起来不会穿过图像


div{
显示：内联flex；
弯曲方向：行；
}
#边界{
宽度：400px；
身高：0；
证明内容：中心；
边框：1.5px实心#f1a327；
}
img{
高度：40px；
宽度：45px；
浮动：对；
利润上限：-20px；
左边距：1米；
}

公开招生
添加img作为背景img作为h3的伪元素（：：之后）：）


h3{边框底部：1.5px实心#f1a327；位置：相对；}
h3：之后{
内容：''；
位置：绝对位置；
背景图片：url(https://image.ibb.co/ibDnXK/circ.png);
显示：块；
宽度：40px；
高度：40px；
背景尺寸：包含；
背景重复：无重复；
右：0；
顶部：calc（50%-10px）；
}
开放注册
h3:after{
内容：''；
显示：块；
边框：1.5px实心#f1a327；
位置：相对位置；
z指数：-1；
}
.标题图标{
浮动：对；
}

公开招生
您可以试试这样的方法。有几个选择。使用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;
}