I am trying to display the detail icon at far right by using webkit-details-marker but not getting the desired output

user_16151747 0
Viewed 89

::-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?

css html
2 Answers

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>

user_86203330

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>

user_142670600
Related