Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 25, 2020 at 11:21 pm #1216316
    awasner

    Hey there,

    i`m looking for an option to underline text parts like in the image:
    https://ibb.co/0XtfwSD

    i would wrap the text part in a span class,- but how is the css part look like?

    thanks a lot!

    May 26, 2020 at 1:24 pm #1216485
    Rikard

    Hey awasner,

    Are you looking for all the text to have a background, or only half of like in your screenshot?

    Best regards,
    Rikard

    May 26, 2020 at 1:25 pm #1216486
    awasner

    Dear Rikard,

    just simple words, not the whole sentence.
    Shoud be a little highlighting of words.

    thanks!
    Andreas

    May 26, 2020 at 7:23 pm #1216612
    Victoria

    Hi Andreas,

    Well, that part of the sentence should be wrapped in a span element and then maybe some css applied to it or some background image.

    Best regards,
    Victoria

    June 4, 2020 at 7:30 am #1219307
    awasner

    Hi Victoria,

    and how would the css part look like?
    can you give me some help?

    Best Regards,
    Andreas

    June 5, 2020 at 7:30 am #1219690
    Rikard

    Hi Andreas,

    Please try something like this in your content:

    <p>This is a paragraph and <span class="yellow-background">this text has a yellow background</span></p>

    Then add this to Quick CSS:

    span.yellow-background {
  background: yellow;
}

    Best regards,
    Rikard

    June 8, 2020 at 10:52 am #1220428
    awasner

    Dear Rikard,

    but this will make just a yellow background. as you can see in the picture, the background goes a bit underneath the text.

    thx
    Andreas

    June 8, 2020 at 8:54 pm #1220636
    Victoria

    Hi awasner,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    June 18, 2020 at 4:16 pm #1223775
    awasner

    Dear Victoria,

    sorry for the late reply.

    On the following Demo Site you`ll see an example in the Menu.

    Blog Home

    Thanks,
    Andreas

    June 19, 2020 at 7:06 am #1223961
    Rikard

    Hi,

    Please try this instead:

    span.yellow-background:after {
    content: '';
    position: absolute;
    z-index: -1;
    background-color: yellow;
    bottom: 1px;
    left: -6px;
    width: calc(100% + 10px);
    height: 10px;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.