how to design title attribute in css

/* use for any tag on your page */ [data-title]:hover:after { opacity: 1; transition: all 0.1s ease 0.5s; visibility: visible; } /* box for title text */ [data-title]:after { content: attr(data-title); /* position for title view box */ position: absolute; bottom: -1.6em; left: 100%; z-index: 99999; visibility: hidden; /* optional */ white-space: nowrap; /* stilization */ background-color: #00FF00; color: #111; font-size: 150%; padding: 1px 5px 2px 5px; box-shadow: 1px 1px 3px #222222; opacity: 0; border: 1px solid #111111; } [data-title] { position: relative; } /* on html page in your tags */ /* <a href="example.com" data-title="My site"> Link </a> with styled tooltip (bigger and with a different background color, as requested in the question)<br/> <a href="example.com" title="My site"> Link </a> with normal tooltip */

COOL css html title tag

h1 { 
  text-align: center;
  color: white;
  text-transform: uppercase;
  padding: 1px;
  font-family: 'Raleway', cursive;
  font-weight: 100;
  position: relative;
  background: -webkit-linear-gradient(left, black, #eee, black);
  background: -moz-linear-gradient(left, black, #eee, black);
  background: -ms-linear-gradient(left, black, #eee, black);
  background: -o-linear-gradient(left, black, #eee, black);
}
h1:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50px;
  width: 600px;
  margin-left: -300px;
  margin-top: -220px;
  height: 600px;
  background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -moz-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -ms-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -o-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  z-index: -1;
}
h1 a {
  background: black;
  display: block;
  padding: 20px;
  text-decoration: none;
  letter-spacing: 30px;
  color: white;
}

Posted by: Guest on October-15-2020

Source

Code answers related to "how to design title attribute in css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "how to design title attribute in css"

Code answers related to "how to design title attribute in css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us