Can the height of the background color in my span be adjusted?
HTML
<span class="highlight">Some highlighted text</span>
CSS
.highlight{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background-color: #4db6ac;
line-height: 2em;
}
I want the highlight to be 1.8em, but I'm unsure how to do it without using lots of divs.
If you're seeking a solution to extend the background color of a <span> elements text beyond its original height while keeping it inline, traditional methods like adjusting line-height or height won't work. The key factors affecting the background color are the font-size and padding. Here's how you can address this scenario:
body {
font-size: 1em;
line-height: 1.5em;
}
span.highlight {
background: yellow;
padding: 0.25em 0; /* ('line-height' - 'font-size') / 2 */
}
span.no-padding {
padding: initial;
}<p style="width:400px">
Here is a bunch of text that will have some highlighted text within it.
<span class="highlight">
Here is some highlighted text that will span multiple lines and will have a full height background color.
</span>
</p>
<p style="width:400px">
Here is also some highlight text without the padding.
<span class="highlight no-padding">
Here is some highlighted text without a full height background, regardless of having the same 'line-height'
</span>
</p>To achieve a highlighted effect on text, you can utilize a vertical linear-gradient with transparent top and bottom colors (in this example, red is used).
By setting the element's height to 2em due to the line-height, 1.8em translates to 90% of the total height. Create a gradient with two transparent strips (displayed in red in the demonstration) each occupying 5% of the height, while the remaining 90% will represent the highlight color.
.highlight {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.5em;
background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);
line-height: 2em;
}<span class="highlight">Some highlighted text</span>When you change the display property to inline-block, your background size will automatically match the line height, eliminating the need for an additional div element. Give it a try and see if it works for you!
.highlight{
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.8em;
background-color: #7a9eb1;
line-height: 2.5em;
}
To achieve the desired effect, simply set the display property to inline-block in your CSS for the element. This will automatically adjust the background size to match the line height without the need for any additional div elements. Try implementing this solution and see if it works for you!
.custom-highlight{
display:inline-block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1.8em;
background-color: #82ca9d;
line-height: 2.2em;
}
I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...
I need to open a new window and send a POST value to a PHP file. For example: <a href='URL.php' target='_blank'> This is a link </a> How can I achieve sending a POST value? Edit: I have already tried the following method ...
Hello, I'm new to utilizing Tinymce within an AngularJS environment. Specifically, I am working with the Tinymce library version 4.3.13. I have constructed some HTML and angularJS code to implement the Tinymce editor, but I've encountered a probl ...
Essentially, I am facing a challenge on my page where a control needs to toggle two different elements with two distinct CSS classes upon being clicked. While I have successfully managed to toggle one of the controls, the other remains unchanged. Here is ...
In my current project, I am dynamically generating anchor tags and using them to redirect to another page based on their unique IDs. While I have successfully implemented this feature using inline scripts in the past, I ran into an issue with Chrome exte ...
I've implemented the JS validation plugin from this source and it's functioning properly. However, it captures all button clicks on the page, including when I click on Back to Home, triggering form validation unnecessarily. I only want the form ...
Hi there, I'm currently facing an issue while building a table cell using the div tag. Specifically, I have encountered some unwanted spacing after my img within the cell. <div style="display:table"> <div style="display:row"> <div s ...
Whenever I try to submit my form, I keep encountering this error message. Can anyone offer some assistance with this issue? Error: Parse error: syntax error, unexpected '"', expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/u378761662/ ...
It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...
While working on creating page numbers, I stumbled upon this intriguing CodePen: https://codepen.io/p-ziegler/pen/bmdaaN .b, input[type="radio"] { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .b { back ...
I am facing an issue with image responsiveness in the middle row of my layout. Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are ...
I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...
There are multiple anchor tags with the same class in my code. <a href='' id='id1' class='abc'>Link 1</a> <a href='' id='id2' class='abc'>Link 2</a> <a href='&apos ...
When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...
Three images are arranged in this manner: https://i.stack.imgur.com/u4PdK.png The HTML code for this setup is as follows: <div class="lb-controlContainer"> <div class="lb-closeContainer"> <a class="lb-close"&g ...
Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...
I am new to using ajax and have successfully retrieved data from a table. However, I am now trying to pull in an entire data grid but not sure how to achieve this. In my index.php file, I have the following code: <html> <head><title>Aj ...
How can you best integrate a preloader in Angular 2? ...
I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...
Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others. Is there a way to achieve this witho ...