How To Remove The Arrow From The HTML Details Tag

Table of contents

• Problem
• Removing the arrow
• Using custom arrows
• Moving the arrow to the right

Problem

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

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

✅ Wrap📋
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.

✅ Wrap📋
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

✅ Wrap📋
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 you might like 😊 How To Render A String As A Blade Template (Laravel 9)