Is there a way to change the color of a single word without affecting the rest of the line?

https://i.sstatic.net/vFWgU.png

I am encountering an issue where I only want the word "declined" to be color inverted, rather than the entire line.

Can anyone provide assistance with this?

.invert {
  background-color: white;
  filter: invert(100%);
}
<div class="line title-line highlight md uppercase invert">
  DECLINED
</div>

Answer №1

Opt for using an inline element rather than a block-level element.

.invert {
  background-color: white;
  filter: invert(100%);
}
<div class="line title-line highlight md uppercase">
  <span class="invert">DECLINED</span>
</div>

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

What is the method for aligning an <img> to the right within a Bootstrap 4 card-body?

I am having difficulty aligning an image to the right within a Bootstrap 4 card-body. I attempted to use the float-right class, but it doesn't seem to be working. Are there any specific considerations for aligning images in a card-body? <div class ...

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

Manipulating the 'display' attribute with jQuery

Is there a way to show an element that has been hidden using the following CSS? .pds-pd-link { display: none !important; } Can jQuery be used to enable the display of the .pds-pd-link CSS? For example, would $(.pds-pd-link).css("display",""); ...

What is the best way to apply a png overlay to each img tag when hovered over?

Here is the code snippet I am working with: <div class="latest-post"> <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark"> <span> <img width="140" height="100" src="http:// ...

Ways to retrieve parameters using $_GET

I am having trouble retrieving the parameter $_GET with a value that contains the character: '#'. Here is the code I am using: <iframe src="http://localhost/wp352/wp-content/plugins/heloworld/templates/options-rte.php?text_content=<span s ...

Strategies for transferring data from index.html to component.ts in Angular 4

Greetings, as a newcomer to Angular, I am seeking advice on how to link my Index.html file to component.ts. Please review the code snippet below where I have created a function called scannerOutput in my Angular index.html file which is functioning properl ...

Bootstrap 5 alert: The function `$(...).carousel` is not recognized

Despite browsing through numerous similar questions, none of the solutions seem to work for my issue. Listed below are some points I have checked: Jquery is loaded before bootstrap Bootstrap libraries are up to date Confirmation that bootstrap.min. ...

set a variable to determine the padding-top of a div

Below is the code snippet: return '<div style="width: 100%; height: 0; position: relative; padding-top: 56.25%"> <div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;"> <unitydog width="'.$width.'" hei ...

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

Animating the menu's height using CSS when it is being displayed or hidden

Currently, I am in the process of developing a horizontal navigation bar with a collapsible menu. For this project, I am utilizing bootstrap 4 and angular. The collapsing and showing functionality is operating as expected when clicking on the menu icon. Ho ...

I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

When adjusting the browser size, the images are resized which is great because it's exactly what I intended. However, the lower part of the black area does not resize accordingly. This results in a black area appearing under the images when viewed on ...

As you minimize the browser window, you may notice a white space appearing when scrolling over

Encountering an issue with my webpage where, upon minimizing the browser horizontally and causing overflow, scrolling over to view the hidden section results in a blank page. Any idea why this is happening? I have set my divs to a specific height (e.g. 9 ...

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

How to Enhance HTML Requests with a Variety of Search Terms

I recently came across a helpful post on how to use R to search for news articles on Google. The post provides a link to Scraping Google News with Rvest for Keywords. The example in the post demonstrates searching for a single term, such as: keyword <- ...

Is it possible to conceal the status bar in a web app designed for iOS 7?

Currently working on a project that involves creating an "add to home screen" game. I am looking for a way to hide the status bar completely, including the time and battery indicators. I know it is possible to change the color of the status bar, but can it ...

Tips for using the window.print() function to display and print another php or html page

<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...

Displaying a second dropdown menu when the first option is chosen

I need help displaying a second select menu once an option in the first one has been selected. How can I achieve this using jQuery? Here is the code snippet: CSS: #2nd{visibility: hidden;} #a{visibility: hidden;} HTML: Please select: <select id ...

jQuery-UI tabs appearing on various elements

My web page layout includes three different divs: header, wrapper, and footer. The header is set to a fixed position. Within the wrapper, there are various components, including some jqueryUI tabs. However, as I scroll down the page, the wrapper and its ...

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

It is not possible to attach separate links to images in a JavaScript slider

I am struggling with linking individual images in a JavaScript slider for a client's website. The slider is fully functional and works well, but I can't seem to figure out how to link the images properly. When I remove items from <--ul class= ...