创建一个与浮动元素的边框相邻的元素

Question

我想让一个白色指针从右浮动段落中伸出来。 这是我迄今为止取得的成就。这远非美味，因为当我调整屏幕大小时指针不想粘在边框上。 解决方案是什么？

#batu {
float: none;
clear: both;
position: relative;
background: url(https://pp.userapi.com/c836431/v836431507/5a2cd/Zc9FsOzRLdY.jpg) no-repeat;
max-width: 1170px;
background-size: cover; /* Never used this before */
}
#batu::after {
content: '';
display: block;
float: none;
clear: both;
overflow: nidden;
}
#batu .overlay-content {
float: right;
width: 40%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
min-height: 517px; /* the height of the background image*/
}
.pointer {
position: absolute;
top: 48%;
left: 48%;
width: 10px;
height: 24px;
background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}

<div id="batu">
<div class="pointer"></div>
<div class="overlay-content">
<h4>Batu</h4>
<p>blablablablablablablablablablablabla
blablablablablablablablablablablablablb
blablablablablablablablablablablablabla
blablablablablablablablablablablablablb
</p>
</div>
</div>

Answer 1

如果可以让指针成为overlay-content内after伪元素，那就更容易了：

1. 将position: relative添加到overlay-content

2. 伪after元素可以如下所示：

   #batu .overlay-content::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   transform: translate(-100%, -50%);
   width: 10px;
   height: 24px;
   background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
   }
   

请参阅下面的演示：

#batu {
float: none;
clear: both;
position: relative;
background: url(https://pp.userapi.com/c836431/v836431507/5a2cd/Zc9FsOzRLdY.jpg) no-repeat;
max-width: 1170px;
background-size: cover;
/* Never used this before */
}
#batu::after {
content: '';
display: block;
float: none;
clear: both;
overflow: hidden;
}
#batu .overlay-content {
float: right;
width: 40%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
min-height: 517px;
/* the height of the background image*/
position: relative;
}
/*
.pointer {
position: relative;
top: 48%;
left: 48%;
float: right;
width: 10px;
height: 24px;
background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}
*/
#batu .overlay-content::after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
width: 10px;
height: 24px;
background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}

<div id="batu">
<!--<div class="pointer"></div>-->
<div class="overlay-content">
<h4>Batu</h4>
<p>blablablablablablablablablablablabla blablablablablablablablablablablablablb blablablablablablablablablablablablabla blablablablablablablablablablablablablb
</p>
</div>
</div>

Answer 2

我已经修改了你的代码。检查此 https://jsfiddle.net/osxo2vzL/。 您需要在段落标签中放入word-wrap: break-word;。