::-webkit-details-marker {
float: right;
}<div class="ques-block">
<details>
<summary class="question">How important is accordian?</summary>
<p class="answer">
Accordian is type of question and answer forum in which qestion is in the question block and answer is in the answer block.
</p>
</div>In the CSS section the ::-webkit-details-marker{} is not working, and even if it is working the output is not visible; what am I doing wrong?
You can simulate it using direction
.question {
direction: rtl;
text-align: left;
}
.question>div {
display: inline-block;
direction: ltr;
}<div class="ques-block">
<details>
<summary class="question">
<div>How important is accordian?</div>
</summary>
<p class="answer">
Accordian is type of question and answer forum in which qestion is in the question block and answer is in the answer block.
</p>
</details>
</div>Not sure how to override marker style, but I can suggest a workaround.
details summary {
position: relative;
}
details summary::after {
content: "▶";
position: absolute;
margin-left: 20px;
}
details[open] summary::after {
content: "▼";
}
summary {
list-style: none
}
summary::-webkit-details-marker {
display: none;
}<div class="ques-block">
<details>
<summary class="question">How important is accordian?</summary>
<p class="answer">
Accordian is type of question and answer forum in which qestion is in the question block and answer is in the answer block.
</p>
</details>
</div>