Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

Question

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags

Should I use two tags for each element? Here is an example:

<ul class="menu">
    <div class="outside"><li class="inside"><a href="#">Firefox</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Chrome</a></li></div>
    <div class="outside"><li class="inside"><a href="#">Opera</a></li></div>
</ul>

Alternatively, should I use double li tags instead? I have experimented with the linear-gradient property in CSS, but using just one tag. To achieve the desired result seen in the image, it appears that two separate tags with different background colors are required, with the black-colored one having a higher z-index.

Being relatively new and inexperienced in design and styling, I truly appreciate any help or guidance you can offer. Thank you in advance!

html css html-lists menuitem

Answer 1

Answer №1

To add a colored side on the left, use the pseudo-element ::before

Keep in mind that using div directly inside a ul is not valid, so I have removed them

Alternatively, you can achieve the same effect using a left border

Answer 2

To add a colored side on the left, use the pseudo-element ::before

Keep in mind that using div directly inside a ul is not valid, so I have removed them

Alternatively, you can achieve the same effect using a left border

Answer 3

Answer №2

To create a linear-gradient effect, simply specify both colors to be at the same position on the gradient (e.g. gray 10%, black 10%) so that they divide the background at that specific point.

Note: It is recommended to remove the outer div elements surrounding your li tags, as they are not valid within a ul element.

ul.menu {
  list-style: none;
  display: flex;
}

ul.menu li.inside {
  background: linear-gradient(to right, gray 10%, black 10%);
  margin-left: 5px;
  padding: 5px 5px 5px 20px;
  width: 120px;
  display: block;
  box-sizing: border-box;
}

li a {
  color: white;
}

<ul class="menu">
  <li class="inside"><a href="#">Firefox</a></li>
  <li class="inside"><a href="#">Chrome</a></li>
  <li class="inside"><a href="#">Opera</a></li>
</ul>

Answer 4

To create a linear-gradient effect, simply specify both colors to be at the same position on the gradient (e.g. gray 10%, black 10%) so that they divide the background at that specific point.

Note: It is recommended to remove the outer div elements surrounding your li tags, as they are not valid within a ul element.

ul.menu {
  list-style: none;
  display: flex;
}

ul.menu li.inside {
  background: linear-gradient(to right, gray 10%, black 10%);
  margin-left: 5px;
  padding: 5px 5px 5px 20px;
  width: 120px;
  display: block;
  box-sizing: border-box;
}

li a {
  color: white;
}

<ul class="menu">
  <li class="inside"><a href="#">Firefox</a></li>
  <li class="inside"><a href="#">Chrome</a></li>
  <li class="inside"><a href="#">Opera</a></li>
</ul>

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

Answer №1

Answer №2

Similar questions

methods to locate the parent element of an element with selenium

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

What is the best way to use a computed property as a style value for a component in Vue.js?

Is there a way to deactivate a button upon clicking and then substitute it with a new button that serves a different purpose in AngularJS?

Prioritize the Menu display

Arranging fixed-width <div>s in rows of four for a sequential display

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Execute the JS function during the first instance of window scrolling

Combining ASP.NET MVC with HTML5 for dynamic web development

Reduced complications with mixin scopes

Fancybox is experiencing some technical difficulties

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Is there a way to prevent HTML Tidy from inserting newlines before closing tags?

Aligning Divs in a Responsive Browser

Tips for stacking objects vertically in mobile or tablet view using HTML and CSS

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Unable to properly access required file path through HTML source

Ways to allocate space evenly between components of the same size in React Native

Combining Django and chartjs to create stacked multiple charts