如何在< details>中正确放置箭头的CSS [英] How to properly position the arrow in <details> CSS

问题描述

我想更改详细显示的箭头的位置.我尝试过float:left，但是如果行太大(如上例中的行)，则当我调整窗口大小时，箭头会在下面的行的开头移动.我希望它能保留在第一行的第一个字母之外.

I would like to change the position of the arrow that appears in details. I've tried float:left but if the line is too big, like the one in the example above, the arrow moves on the start of the line underneath when I resize the window. I would like it to stay on besides the very first letter on the first row.

我该怎么做?

示例:

<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
  gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis. 
 </summary>
  Content goes here.
</details>
<style>
 summary::-webkit-details-marker {
 display: none
}
 summary:after {
 content: "+";
 color: #fff;
 float: left;
 }

 details[open] summary:after {
 content: "-";
 }
</style>

推荐答案

使用:before 而不是:after

 summary::-webkit-details-marker {
 display: none
}
 summary:before {
 content: "+";
 color: red;
 float: left;
 margin-right: 10px;
 }

 details[open] summary:before {
 content: "-";
 }

<details>
  <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 
  gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis. 
 </summary>
  Content goes here.
</details>

这篇关于如何在< details>中正确放置箭头的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！