如何使 ::before 出现在 div 的每一行包装线之前？

huangapple
go评论92阅读模式
英文:

How to make ::before appear before every wrapped line of a div?

问题

I have a div element that has a border-left on a ::before. It works perfectly on one line, but when I wrap the line, the border-left only covers the first line. How can I spread that line to the entire height of the div element? I've tried height but that doesn't seem to change it at all.

  1. #chatbox {
  2.   background-color: lightgray;
  3.   border: 1px solid gray;
  4.   padding: 10px;
  5.   height: 500px;
  6.   width: 50%;
  7.   overflow: wrap;
  8.   word-wrap: break-word;
  9.   border-radius: 5px;
  10.   text-align: left;
  11. }
  13. #chatbox div {
  14.   margin-bottom: 5px;
  15.   border-radius: 5px;
  16.   padding: 7px;
  17. }
  19. #chatbox div::before {
  20.   content: '';
  21.   margin-right: 7px;
  22.   margin-left: 3px;
  23.   border-left: 3px solid gray;
  24.   height: 1230px;  /* This line sets the height of the ::before element. */
  25. }
  1. <div id="chatbox">
  2.   <div>
  3.     qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
  4.   </div>
  5. </div>
英文:

I have a div element that has a border-left on a ::before. It works perfectly on one line, but when I wrap the line, the border-left only covers the first line. How can I spread that line to the entire height of the div element? I've tried height but that doesn't seem to change it at all.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #chatbox {
  2.   background-color: lightgray;
  3.   border: 1px solid gray;
  4.   padding: 10px;
  5.   height: 500px;
  6.   width: 50%;
  7.   overflow: wrap;
  8.   word-wrap: break-word;
  9.   border-radius: 5px;
  10.   text-align: left;
  11. }
  13. #chatbox div {
  14.   margin-bottom: 5px;
  15.   border-radius: 5px;
  16.   padding: 7px;
  17. }
  19. #chatbox div::before {
  20.   content: &#39;&#39;;
  21.   margin-right: 7px;
  22.   margin-left: 3px;
  23.   border-left: 3px solid gray;
  24.   height: 1230px;
  25. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;chatbox&quot;&gt;
  2. &lt;div&gt;
  3. qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
  4. &lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

Make the div position relative so it stays in its original place but be a "positioned element" so its child (the ::before element) can be absolute positioned relatively to it.

Make the ::before top and bottom 0 so it stretches the pseudo-element size.
Add left to make an offset.

英文:

Make the div position relative so it stays in its original place but be a "positioned element" so its child (the ::before element) can be absolute positioned relatively to it.

Make the ::before top and bottom 0 so it stretches the pseudo element size.
add left to make offset.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #chatbox {
  2.   background-color: lightgray;
  3.   border: 1px solid gray;
  4.   padding: 10px;
  5.   height: 500px;
  6.   width: 50%;
  7.   overflow: wrap;
  8.   word-wrap: break-word;
  9.   border-radius: 5px;
  10.   text-align: left;
  11. }
  13. #chatbox div {
  14.   margin-bottom: 5px;
  15.   border-radius: 5px;
  16.   padding: 7px;
  17.   position: relative;
  18. }
  20. #chatbox div::before {
  21.   content: &#39;&#39;;
  22.   border-left: 3px solid gray;
  23.   top:0;
  24.   bottom:0;
  25.   left:-3px; /* or any other offset */
  26.   position: absolute;
  27.   
  28. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;chatbox&quot;&gt;
  2. &lt;div&gt;
  3. qwerty: 562243835622438356224383562243835622438356224383562243835622438356224383562243835622438356224383
  4. &lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月17日 21:46:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/76035849.html
  • css
  • css-selectors
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定