Css
•
• 1 min read

How to add under highlight to text in css

Khoa Pham
Written by
Khoa Pham
How to add under highlight to text in css

Issue #701

Use mark. This does not work for multiline

<p>
    <mark css={css`
        display: inline-block;
        line-height: 0em;
        padding-bottom: 0.5em;
        `}>{feature.title}
    </mark>
</p>

Another way is to use background

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}

Read more

Updated at 2020-11-20 05:23:59

Khoa Pham
Written by
Khoa Pham

I’m open source contributor, writer, speaker and product maker.

Start the conversation

Related

See all Css
Javascript Css
•

How to dynamically build tailwind class names

Issue #950

Inspired by shadcn

Combine

  • tailwind-merge: Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
  • clsx: constructing className strings conditionally.
import { clsx, type ClassValue } from "clsx" …

Khoa Pham
Written by
Khoa Pham
Css React
•

How to conditionally apply css in emotion js

Issue #649

Check flag then define css

const Picture = (feature) => {
    const shadowCss = feature.shadow ? css`
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    ` : css`` …

Khoa Pham
Written by
Khoa Pham
Css Javascript
•

How to make simple filter menu in css

Issue #643

Use material icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

div#filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: …

Khoa Pham
Written by
Khoa Pham
Css
•

How to make simple grid gallery in css

Issue #642

Specify container with flex-wrap and justify-content, and item with float: left

div.cards {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10%;
}

div.card {
  overflow: hidden;
  float: …

Khoa Pham
Written by
Khoa Pham