h2 {background-color:#C61236;
color:#FFFFFF;
font-size:medium;
line-height:1.5;
text-indent:20px;}
Although the current setup looks good, I am looking to incorporate a new color block at the start of the text.
I'm not sure what steps to take next..
If you enclose your content within a span tag, accomplishing this task becomes quite simple.
<h2><span>Text</span></h2>
To style the h2 background and the span with different colors, use padding to reveal the h2 background:
h2 {
background-color:#C61236;
color:#FFFFFF;
font-size:medium;
line-height:1.5;
/*text-indent:20px;*/
padding-left:20px;
}
h2 span {
background-color:#f00;
}
A straightforward and semantic approach that comes to mind is to eliminate the text-indent and instead include a left border with the desired color, like so:
h2 {background-color:#C61236;
color:#FFFFFF;
font-size:medium;
line-height:1.5;
border-left: 20px solid yellow;}
You can observe this in action on this jsFiddle link.
It's advisable to specify a unit for your line-height as well.
If you're looking to achieve this effect, there are a variety of methods you could consider. In my opinion, one of the simplest approaches would involve creating a small image with a single color for the left background, and then using a solid color as the primary background behind the text. You can set the created image as the background for the block running vertically down the left side like so:
background: #C61236 url( 'singlecolour.png' ) top left repeat-y;If it's accessible to you, another choice could be utilizing a CSS3 gradient as the backdrop instead:
background-image: linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -o-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -moz-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -webkit-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -ms-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
Take a look at this straightforward code snippet :-
h2 {background-color:#C61236;
color:#FFFFFF;
font-size:medium;
position:relative;
margin:10px 0 0 50px;
}
h2:before {
position:absolute;
content:" ";
background:blue;
width:100px;
left:-100px;
top:0;
bottom:0;
}
Check out the live demo here:- http://jsfiddle.net/3EY7t/3/
I want to create a unique extended navigation bar for my website that has the following structure: <nav class="nav-extended"> <div class="nav-wrapper"> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a ...
Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...
My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...
Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...
While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...
I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...
Struggling with customizing my navigation menu in CSS, I'm seeking assistance. My goal is to have the second child element of the navigation menu on a new line instead of below the first child (refer to the image for clarification). An example of the ...
Whenever I hover over a button, I struggle to receive the appropriate message like "click" or "enter" before actually clicking it. How can I use CSS to style my buttons in a way that allows for this pre-click messaging? I have tried approaches such as .bu ...
For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...
Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...
Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...
I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...
How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a ...
After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...
I am working on a view where I display dynamically expanding cards upon hover. Below is the CSS code snippet: .card-deck .card { height:200px; width: 200px; transition: transform .1s; } .card-deck .card:hover { -ms-transform: scale(1. ...
Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side. const customStyles = makeSt ...
I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...
There are moments when I question my sanity, and today seems to be one of them. Despite what I thought was a straightforward CSS code, it's just not functioning properly. What could I possibly be overlooking? Here is the CSS snippet in question: ul ...
Currently, I'm utilizing the WebStorm IDE to work on my React project. My goal is to make modifications to the app.css files in order to update the design. However, each time I attempt to build or run the project, it dismisses all of the changes I&apo ...
I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...