Html – JavaScript Matching Emails
I am new to JavaScript and need to verify that the emails match in two input boxes. It only needs to verify that they match, not that they are correctly formatted emails. What I have now does alert when they…
How to style a specific nested tag from a parent element using Tailwind CSS?
I want to style an <a> tag inside a using Tailwind CSS. I want to add the style via the parent <ul> tag. I tried [&>li>a], but it doesn't work as expected. Here is my HTML structure: <ul class="flex items-center…
Css – Could someone tell me why my radial gradient SVG is not animating on hover?
The radial gradient is supposed to grow from 10% to 100% on hover, but it's just not doing anything. Can't understand what I'm doing wrong. <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <style><![CDATA[ #svgDoc { pointer-events: all…
Html – Text decoration span over <span>s
I have a <ul> element, with list items as such: <ul> <li class="list__item"> <span class="list__quantity">3</span> <span class="list__unit">Kg</span> <span class="list__name">Tomatos</span> </li> <li class="list__item"> <span class="list__quantity">3</span> <span class="list__unit">Kg</span> <span class="list__name">Cucmbers</span> </li> </ul> I want to have a text-decoration: line-through that spans across…
Html – Why 100vh can't strecth full screen but flex column does?
When I inspect the codes below, I noticed the body tag can't stretch full height according to HTML height due to that the scroll appears, and I don't want that. I try set display to flex column and that work…
Html – aria-labelledby pseudo elements
I have a quite simple question, I'm using some buttons that does not contain any text, only an svg, but when you hover on it, a label appear (:after) which is bad for a11y. I'd like to make this a…
How to prevent darkened overlapping of text with reduced letter spacing in html/css
result on webpage The text upon overlapping darken as in letter 'R' and 'A'. I want either to be on top of the other(or any other way to prevent this). My code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…
Html – Wrapping an absolutely positioned span after a relatively positioned one
I have a parent container who has two children, like so: <div class='parent'> <span id='Span1' style='position: relative'>Some content that is fixed</span> <span id='Span2'><span style='position: absolute'><span>Some content that is fading in and out</span></span> </div> The first one is fixed, and the…
Html – overlay around image in css
I want to make an overlay around image like this I tried this but it's not look like I wanted background-image: linear-gradient( 90deg, #171717 0%, rgba(23, 23, 23, 0.986) 0.97%, rgba(23, 23, 23, 0.945) 2.07833333%, rgba(23, 23, 23, 0.883) 3.29666667%,…
Html – Why is it that making a div 'display: flex' changes the height of the inner div?
I have the following HTML/CSS code, whenever I toggle the display: flex in .cards-container the height of the .card div seems to shrink (when display: flex is not present) and grow (when display: flex is present). I was wondering what's…