How do I move the + sign to the left?

by 

summary {
    transition: background .75s ease;
    width: 960px;
    outline: 0;
    text-align: center;
    font-size: 85%;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid black;
}

summary::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    margin-left: 5px;
    display: inline-block;
    padding-right: 15px;
    font-size: 90%;
    color: rgb(0, 0, 255);
}
details[open] summary::before {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    display: inline-block;
    padding-right: 15px;
    font-size: 90%;
}

In the shared code above, you have to remove the float: right from the summary CSS and remove justify-content: space-between, it will work also on using before instead of after, as after is used to insert the element after the text where, as with before it will include the element before the text in the summary tag.

More Related Contents:

  1. JS hide function error
  2. How to read with JavaScript [closed]
  3. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  4. CSS Circle without using background [closed]
  5. Create a field to accept tags HTML/JS [closed]
  6. Can I hide the HTML5 number input’s spin box?
  7. Changing CSS Values with Javascript
  8. Add a tooltip to a div
  9. Is it possible to hide the cursor in a webpage using CSS or Javascript?
  10. Text-overflow ellipsis on left side
  11. How to detect which one of the defined font was used in a web page?
  12. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  13. How to change CSS :root color variables in JavaScript
  14. How to change style of iframe content cross-domain?
  15. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  16. How to print HTML content on click of a button, but not the page? [duplicate]
  17. Save a pre element as PDF with CSS
  18. jQuery Validation using the class instead of the name value
  19. Center flex item in container, when surrounded by other flex items
  20. Change the style of :before and :after pseudo-elements? [duplicate]
  21. How to create checkbox inside dropdown?
  22. Javascript-Setting background image of a DIV via a function and function parameter
  23. Remove scrollbar but not scrolling functionality [duplicate]
  24. Gaussian Blur onHover Using jQuery
  25. Placeholder for contenteditable div
  26. Setting the height of a DIV dynamically
  27. assign color to mouse cursor using CSS
  28. Center an Image vertically and horizontally using CSS
  29. Change background on button click, using CSS only? [duplicate]
  30. Jquery/Javascript Opacity animation with scroll

Leave a Comment