Css styling for text highlighting

It's been some time since I encountered a CSS problem, but here I am facing one. In short, I want to highlight text with a gradient background, which I managed to achieve using the <span> tag and setting a background image on it. However, I ran into an issue when the text wraps onto a new line.

I did find a solution, but it involved messy HTML code, and I prefer not to compromise the cleanliness of my HTML for styling purposes.

The best way to explain this is by showing you an example. Check it out here.

In the provided link, the top <li> demonstrates the broken style with good HTML, while the bottom <li> shows how it should look but with undesirable markup.

If anyone has any solutions, I would greatly appreciate them. I'm open to using Javascript or jQuery, but CSS is preferred if possible.

Thank you in advance for any help! :)

csshighlightinghtml

Answer №1

If you're looking for some unique CSS hacks that work specifically in Firefox and Safari, I've got you covered!

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Check out the reference link for more astonishing CSS hacks and techniques:

I hope this helps you out! :)

Answer №2

To avoid the need for additional markup, one effective method is to utilize a repeating background-image with the same height as a line. This technique should function efficiently and quickly, especially when maintaining a consistent line-height. Other methods may result in slower or heavier outcomes.

Answer №3

In the final analysis, I found that utilizing the <span> tag was the most effective solution for this issue. Although I typically steer clear of using it, in this particular scenario it proved to be necessary. Refer to the revised JS fiddle in the original question to see the implementation.

Answer №4

Perhaps this will give you what you need

ul#container li.hilight {
    padding:5px 10px;
    background:url('http://www.example.com/images/background.jpg') center repeat-x #f90;
    line-height:25px;
    color:#000;
}

as well as 

<li class="hilight">
        This is the desired text appearance
    <br />
        even though the HTML code can be improved
</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Simultaneous CSS3 animations on a pair of items

I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure: <div id="wrapper"> <ul class="menu"> ...

htmlcss

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Incompatibility Issue with Ajax Request on iPad 1 (iOS 5.1.1)

Having an issue with reloading content on my iPad web app. The get request works fine in the browser, but I'm experiencing trouble in Safari on the iPad 1 (iOS 5.1.1). Any suggestions on how to fix this? <script type="text/javascript"> ...

jqueryhtmliosajaxipad

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

My local WAMP server hosts a web application with self-signed SSL enabled, resulting in the following app URL: https://myipaddress:port/demoapp/index.html However, when I send this URL via WeChat chat and click on it, only a blank page is displayed. Stra ...

htmlweb-applicationsgoogle-chrome-extensiongoogle-chrome-devtoolswechat

What causes the discrepancy in CSS display between production and development environments in Material-UI?

Using material UI (verison: ^4.12.3) Select, with a customized input has led to an unexpected issue in the production environment. The Select input in prod has a black background and a :before element with a white background that I didn't intend to ha ...

cssreactjsmaterial-uidevelopment-environmentproduction-environment

What is the process for transforming a string into a dictionary using jinja2?

I have a variable called {{data}} which contains a string formatted like this: *{"a": "1", "b": "2", "c": 3, "d": 4}* My goal is to access the values in this format: *{{data.a}} --> 1 {{data.b ...

pythonhtmljinja2

"Rearrange elements on a webpage using CSS and HTML to position one

Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order? <div id="first">first</div> <div id="second">second</div> #first {…} ...

htmlcss

Adjust the height of the div element to match the screen height with AngularJS controller

Can someone please assist me in resolving this issue? I'm currently working on a div element that displays data (positioned on the left side of the screen). I want to add a scrollbar exclusively to this div. I managed to achieve this by using the fol ...

htmlcssangularjsscrollbar

Is it possible to locate an element using regex in Python while using Selenium?

Is it possible to interact with a dynamically generated dropdown list using Selenium if I only know the phrase present in its id or class name? Can Selenium locate an element using regex and click on it accordingly? ...

javascriptpythonhtmlregexselenium

What is causing the text to not wrap around properly?

I'm currently facing an issue where the text that should not wrap around the image is wrapping, while the text that should be wrapped isn't. This is causing a layout problem in my coding section as shown here: https://i.sstatic.net/2oMn1.png The ...

htmlcss

Accurately replicate the Logout functionality of asp:Login within the siteMap

How can you effectively integrate/simulate the Logout feature in asp:Login for a siteMapNode? <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> <%--[ <a href ...

c#htmlasp.netsitemaplogout

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

I'm experiencing an issue with the carousel slider on my website. It seems to only be working in Chrome and not in Mozilla Firefox. You can view the live site at: Below is the code I have used for the carousel: <header id="myCarousel" class="car ...

javascriptjquerycsstwitter-bootstrap

Generating automatic slugs in Django is a useful feature to simplify URL generation

I'm in the process of creating a blog and I am looking for a way to automatically generate the slug so that the URL can be based on the article title. Thank you very much ...

pythonhtmldjangoslug

Adjusting icons based on the length of the text

When I have a title text and an icon, I want to align the icon to the left if the title fits on a single line. However, if the title spans multiple lines, then I need to align the icon to the top. I recently discovered a solution that involves using Javas ...

javascriptcssangularflexboxcss-grid

Can information be transferred to a CSS document?

Currently working on developing a content management system (CMS) using PHP and exploring the possibility of passing a URL to an image. In my PHP pages, I am utilizing Twig templates and the {{ image1url }} to display the image URL. Is there a way to pas ...

phphtmlcsssymfony

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

htmlcsstwitter-bootstrapbootstrap-5

What could be the reason for my difficulties in retrieving the necessary data from this website with Selenium?

Basically, I've been struggling to interact with the "enter your address" field on a particular website through xpath and selenium. I'm curious as to why this is happening. Detailed Explanation The website in question is this one. It features a ...

pythonhtmlamazon-web-servicesseleniumweb-scraping