CSS 伪元素定位 - 上面的部分边框 header
CSS pseudo element positioning - partial border above header
我正在努力将部分边框定位在标题的正上方，而不是标题浮动到 'before' 伪元素的左侧。它在没有图像的页面上工作正常，但我需要标题和文本在某些存在图像但不存在图像的页面上环绕图像，这就是导致问题的原因。
我已经尝试过绝对定位，不同的显示，但没有任何效果。
https://codepen.io/lol4000/pen/dyZvmGK
<img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px"> <h2 class="sub-title">Test English subtitle</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p> <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis. <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
h2.sub-title {font-size:28px;display: block;}
h2.sub-title::before{ position: relative; height: 8px;width: 130px;left: 0; top: -10px;background: #441A6D;display:block;content: ""}
.wp-post-image {
float: left;
margin: 0 15px 10px 0;}
因为你想让文字到照片的底部，所以你用了这个方法，h2标签覆盖了整个容器，所以第一个h2就是照片的开头。
h2.sub-title {font-size:28px;display: block;position: relative;}
h2.sub-title::before{ position: absolute; height: 8px;width: 130px;left: 0; top: -10px;background: #441A6D;display:block;content: ""}
通过 JavaScript 获取 width 和 margin-right img 并将样式设置为 left ::before，以及
之前是绝对的
据我所知，我创建了一个替代解决方案而不是伪元素。请查看并告诉我。
.image-text{display: flex; flex-direction:row; flex-wrap: wrap;}
.heading{posittion: relative;}
h2.sub-title {font-size:28px;position: relative;}
.border{ position: relative; height: 8px;width: 130px; top: 17px;background: #441A6D; display: inline-block; }
.wp-post-image {
margin: 0 15px 10px 0;}
<div class="image-text">
<div class="image"><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px">
</div>
<div class="heading">
<span class="border"></span>
<h2 class="sub-title">Test English subtitle</h2>
</div>
</div>
更新： 好的，所以我们在标题中使用display: inline-block;来正确定义框在页面中的作用，即内联。由于我们的内容中没有包装元素，我们不需要做任何其他事情（相对和绝对定位除外）。此外，我在 img 上使用了 float: left;，因为我们希望 img 位于最左侧，而其余内容在其右侧溢出。
h2.sub-title {
font-size: 28px;
position: relative;
display: inline-block;
}
h2.sub-title::before {
position: absolute;
height: 8px;
width: 130px;
left: 0;
top: -10px;
background: #441A6D;
display: block;
content: "";
}
img {
margin: 0 15px 10px 0;
max-width: 100%;
height: auto;
float: left;
}
<div>
<img src="https://via.placeholder.com/200x200">
<h2 class="sub-title">Test English subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p>
<p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis.
<p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p>
<p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
enim.
</p>
<p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
<p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
enim.
</p>
<p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
</div>
使用flex代替float:
h2.sub-title {
font-size: 28px;
display: block;
}
h2.sub-title::before {
position: relative;
height: 8px;
width: 130px;
left: 0;
top: -10px;
background: #441A6D;
display: block;
content: ""
}
div {
display: flex;
}
.wp-post-image {
margin: 0 15px 10px 0;
}
<div><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w"
sizes="(max-width: 420px) 100vw, 420px">
<h2 class="sub-title">Test English subtitle</h2>
</div>
我正在努力将部分边框定位在标题的正上方，而不是标题浮动到 'before' 伪元素的左侧。它在没有图像的页面上工作正常，但我需要标题和文本在某些存在图像但不存在图像的页面上环绕图像，这就是导致问题的原因。
我已经尝试过绝对定位，不同的显示，但没有任何效果。
https://codepen.io/lol4000/pen/dyZvmGK
<img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px"> <h2 class="sub-title">Test English subtitle</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p> <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis. <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p><p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero enim.</p> <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
h2.sub-title {font-size:28px;display: block;}
h2.sub-title::before{ position: relative; height: 8px;width: 130px;left: 0; top: -10px;background: #441A6D;display:block;content: ""}
.wp-post-image {
float: left;
margin: 0 15px 10px 0;}
因为你想让文字到照片的底部，所以你用了这个方法，h2标签覆盖了整个容器，所以第一个h2就是照片的开头。
h2.sub-title {font-size:28px;display: block;position: relative;}
h2.sub-title::before{ position: absolute; height: 8px;width: 130px;left: 0; top: -10px;background: #441A6D;display:block;content: ""}
通过 JavaScript 获取 width 和 margin-right img 并将样式设置为 left ::before，以及
之前是绝对的
据我所知，我创建了一个替代解决方案而不是伪元素。请查看并告诉我。
.image-text{display: flex; flex-direction:row; flex-wrap: wrap;}
.heading{posittion: relative;}
h2.sub-title {font-size:28px;position: relative;}
.border{ position: relative; height: 8px;width: 130px; top: 17px;background: #441A6D; display: inline-block; }
.wp-post-image {
margin: 0 15px 10px 0;}
<div class="image-text">
<div class="image"><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w" sizes="(max-width: 420px) 100vw, 420px">
</div>
<div class="heading">
<span class="border"></span>
<h2 class="sub-title">Test English subtitle</h2>
</div>
</div>
更新： 好的，所以我们在标题中使用display: inline-block;来正确定义框在页面中的作用，即内联。由于我们的内容中没有包装元素，我们不需要做任何其他事情（相对和绝对定位除外）。此外，我在 img 上使用了 float: left;，因为我们希望 img 位于最左侧，而其余内容在其右侧溢出。
h2.sub-title {
font-size: 28px;
position: relative;
display: inline-block;
}
h2.sub-title::before {
position: absolute;
height: 8px;
width: 130px;
left: 0;
top: -10px;
background: #441A6D;
display: block;
content: "";
}
img {
margin: 0 15px 10px 0;
max-width: 100%;
height: auto;
float: left;
}
<div>
<img src="https://via.placeholder.com/200x200">
<h2 class="sub-title">Test English subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p>
<p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis.
<p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p>
<p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
enim.
</p>
<p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
<p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
enim.
</p>
<p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
</div>
使用flex代替float:
h2.sub-title {
font-size: 28px;
display: block;
}
h2.sub-title::before {
position: relative;
height: 8px;
width: 130px;
left: 0;
top: -10px;
background: #441A6D;
display: block;
content: ""
}
div {
display: flex;
}
.wp-post-image {
margin: 0 15px 10px 0;
}
<div><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w"
sizes="(max-width: 420px) 100vw, 420px">
<h2 class="sub-title">Test English subtitle</h2>
</div>