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 can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...
My latest project involves a menu with three separate divs: logo, nav-bar, and right-bar. I decided to use justify-content: space-around to position the elements - the logo on the left, navigation in the center, and right-bar on the right. However, when I ...
Currently, I am developing a website and encountering a specific issue with the modal structure. When viewing it on Codepen using Chrome devtools and toggling the device toolbar to simulate mobile screens, everything appears fine. However, when opening the ...
I have a TypeScript web application where I need to include CSS files from NPM dependencies in index.html. Here is an example of how it is done: <link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css&quo ...
I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...
I recently followed the installation guide for using Tailwind with Next.js Here is a snippet from my tailwind.config.js file: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ...
I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format? ...
Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...
I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...
Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges. This is my file directory structure: D:/nodeStuff/uiGrid includes: node_modules uigrid.css uigrid.h ...
I'm relatively new to css and I'm attempting to create a border around a <div>. My goal is for the border to be limited to the size of the elements inside the div and adjust dynamically in proportion to any new objects that may appear or di ...
I am experimenting with filling a parent <div> with an image without concern for proportions. Despite knowing that it may not look great at all sizes, I just want to test its feasibility. Currently, the image is scaling instead of stretching to fit m ...
I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...
Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...
I'm having trouble coming up with a title for my question, so please bear with me. I am working on a Bootstrap website and I want to create a consistent navbar and footer across all pages without duplicating the code in each document. How can I achiev ...
I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been ...
Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...
Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...
I've been struggling for hours trying different methods to achieve the desired outcome, but unfortunately, none of them have worked as expected. My goal is simple: I want the fixedbar to fade in when the scroll position exceeds the position of the ph ...
I am currently working on converting CSS to inline using DOMDocument and DOMXPath. However, I'm encountering an issue where the HTML I provide is not being recognized as valid XML. Is there a way for me to configure these functions to ignore unknown ...