How to remove the arrow from the HTML details tag

👉 Problem

01: <details>
02: <summary>Click here</summary>
03: Revealed content
04: </details>
Click here Revealed content

By default, the HTML < details > tag has an arrow marker just before the summary text. This is to let the user know they can click on it to display the collapsed content.

Depending on your page design you might want to remove this arrow.

👉 Removing the arrow

01: <style>
02: details > summary {
03:   list-style: none;
04: }
05: details > summary::-webkit-details-marker {
06:   display: none;
07: }
08: </style>

The first style removes it for most browsers. The second style is specifically for Webkit based browsers like Safari.

👉 Using custom arrows

You can change the default arrows to whatever you want using the style below.

01: <style>
02: details summary {
03:     list-style-type: '👉 ';
04: }
05: 
06: details[open] summary {
07:     list-style-type: '👇 ';
08: }
09: </style>

👉 Moving the arrow to the right

01: <style>
02: details>summary {
03: 
04:   list-style: none;
05: }
06: summary::-webkit-details-marker {
07:   display: none
08: }
09: 
10: summary::after {
11:   content: ' +';
12: }
13: details[open] summary:after {
14:   content: " -";
15: }
16: </style>

The style code above adds a marker to the front of the summary text. The first part of the style removes the marker on the left and the latter style appends whatever you choose to the front of the summary text using the pseudo element ::after.

Here is another article for you 😊 "PHP check if string contains"