CSS 当父元素溢出时允许 before/after 元素超出 div

Question

我希望我的之前或之后元素显示在 div 之外。请注意，此父级 div 必须是具有溢出自动或滚动功能的滚动元素，但是 div 函数的输出将其禁用。

右边应该是这样的，但是有滚动功能：

.container {
  display: flex;
}

.parent {
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
}

.of {
  overflow: auto;
}

p {
  color: white;
  position: relative;
}

p::after {
  position: absolute;
  bottom: -8px;
  left: -16px;
  content: '';
  height: 2px;
  background: green;
  width: 2.313rem;
}

<div class="container">

  <div class="parent of">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

</div>

Answer 1

要使两者 parent divs 都可滚动，您可以在父项上设置 overflow: auto;。

我将您的 ::after 更改为 ::before 以便它与您的文本对齐，而不是紧挨着它。然后你可以把你的绝对定位改成position: fixed;，让它看起来像右边但仍然有滚动能力。

.container {
  display: flex;
}

.parent {
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  border-left: 20px solid #fff;
  padding-left: 20px;
  margin-left: -23px;
  background-clip: content-box;
  overflow-x: hidden;
}


p {
  color: white;
  position: relative;
  margin-left: -10px;
  background-clip: content-box;
  padding-left: 10px
}

p::after {
  position: absolute;
  content: '';
  height: 2px;
  background: green;
  width: 2.5rem;
  left: -1px;
  top: 1rem;
}

<div class="container">

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div

</div>

Answer 2

我在下面更改并添加 css :

.parent {
   border-left: 20px solid #fff;
   padding-left: 20px;
   margin-left: -23px;
   background-clip: content-box;
   overflow-x: hidden;
}
p {
   margin-left: -20px;
   background-clip: content-box;
   padding-left: 20px
}
p::before {
   position: absolute;
   left: -0px;
}

最终代码：

.container {
  display: flex;
}

.parent {
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  overflow: scroll;
   border-left:20px solid #fff;
  padding-left:20px;
  margin-left:-23px;
    background-clip: content-box;
overflow-x:hidden;
}


p {
  color: white;
  position: relative;
  margin-left:-20px;
  background-clip: content-box;
  padding-left:20px
}

p::before {
  position:  absolute;
  content: '';
  height: 2px;
  background: green;
  width: 2.313rem;
  left:-0px;
}

<div class="container">

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p> <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p> <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

</div>

CSS 当父元素溢出时允许 before/after 元素超出 div

CSS allow before/after element out of div when parent element has overflow

html

css

pseudo-element