Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1091888

    Hi guys

    I currently have some issues with a custom unordered list icon I am using and its space to the text with multi line content.
    Here is the code I got so far. No matter what I add/change, the second line is never aligned properly with the one above and I don’t want these around 40px space between the dot and the text.

    HTML:

    <ul class="red-dots-special">
      <li class="li-black-space-left">Ganz langer Text aksdahsd ahsd asdhasjd adshfjdshfsjdfh sdjfhs djfsh dfkshdfjkshd gjksdhgf jksdf hfgjsdkhf sjkdhf sdjkfsdjkfs djkfsd jfk sdjkfsd fjksdf sdjfsdjfksdfjksd</li>
      <li class="li-black-space-left">Etwas kürzerer Text asdask djasjkldj adkf sdlfj sdfjshdjflksdh f</li>
      <li class="li-black-space-left">Bla bla blaaaaaa asdsdllsd sadf dsfksdjfksjfksfjsdkf fsdkfsdf ksdfksdf sdkf sdkf sdfk.</li>
      </ul>

    CSS:

    .red-dots-special {
        list-style: none !important;
    }
    
    .red-dots-special li::before {
        content: "\2022";
        display: inline-block;
        color: #CB2D27 !important;
        font-weight: bold !important;
        font-size: 1.5em;
        width: 25px;
    }
    
    .li-black-space-left {
        color: black;
        margin-bottom: 0px;
        margin-top: 0px;
        padding-left: 42px !important;
        text-indent: -25px !important;
    }

    Everything I have read and figured out so far says that I can adjust the position of the second line of text with the parameters/combination of padding-left and text-indent. For some reason, this does not work the way I want or I am missing something here.

    Does anybody know how to solve this?

    Thanks a lot and best,
    Michael

    #1092046

    Thread can be closed – I could solve it like this within CSS:

    .red-dots-special {
        list-style: none !important;
    margin-left: 20px;
    }
    .red-dots-special li::before {
        content: "\2022";
        display: inline-block;
        color: #CB2D27 !important;
        font-weight: bold !important;
        font-size: 1.5em;
        width: 10px;
    }
    
    .li-black-space-left {
        color: black;
        margin-bottom: 0px;
        margin-top: 0px;
    padding-left: 0 !important;
    text-indent: -10px !important;
    }
    #1092048

    Hi,

    Glad you figured it out and thanks for sharing your solution! :)

    Best regards,
    Yigit

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Reduce space between custom list icon and text’ is closed to new replies.