UIUX Component

  The empty pseudo selector to define the element is empty. DEMO Got Content! HTML <p class= "smile-content" ></p> <p class= "smile-content" > Got Content! </p> CSS .smile-content :before { content : '😄' ; margin-right : 0.3em ; } .smile-content :empty:before { content : '☹️' ; }

Smooth animation card effect using box shadow with only CSS animations and a pseudo element. Hover over the box below to see the action. DEMO HTML < div class = "box-shadow" ></ div > CSS . box - shadow { position: relative; display: inline - block; width: 100 px; height: 100 px; border - radius: 5 px; background - color: #fff; box - shadow: 0 1 px 2 px rgba( 0 , 0 , 0 , 0.15 ); transition: all 0.3 s ease - in - out; margin: 1 em; background - color: BlanchedAlmond; } . box - shadow::after { content: '' ; position: absolute; z - index: - 1 ; width: 100 % ; height: 100 % ; opacity: 0 ; border - radius: 5 px; box - shadow: 0 5 px 15 px rgba( 0 , 0 , 0 , 0.3 ); transition: opacity 0.3 s ease - in - out; } . box - shadow:hover { transform: scale( 1.2 , 1.2 ); } . box - shadow:hover::after { opacity: 1 ; }

Change the text selection style in CSS via ::selection pseudo-class. Try select text inside the cyan box bottom below to see the action. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. CSS article::selection { background: green; color: yellow; }

Selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form. Demo Heading 1 Heading 2 Heading 3 HTML < h1 > Heading 1 </ h1 > < h2 class = "success" > Heading 2 </ h2 > < h3 > Heading 3 </ h3 > CSS : is (h1, h2, h3) . success { color: red; }