{"id":93,"date":"2019-03-15T09:09:05","date_gmt":"2019-03-15T09:09:05","guid":{"rendered":"https:\/\/www.samarthya.me\/wps\/?p=93"},"modified":"2019-03-15T09:09:05","modified_gmt":"2019-03-15T09:09:05","slug":"css-continued","status":"publish","type":"post","link":"https:\/\/blog.samarthya.me\/wps\/2019\/03\/15\/css-continued\/","title":{"rendered":"CSS continued"},"content":{"rendered":"

Pseudo classes<\/h1>\n

State dependent styling, e.g Style a checkbox when it is in checked state. It is usually denoted by a preceding colon ‘:’ (without the quote).<\/p>\n

:active
\n:checked
\n:default
\n:dir
\n:disabled
\n:empty<\/p><\/blockquote>\n

E.g.<\/p>\n

<div id=”myDiv”> <a href=#> Dummy link<\/a> <\/div><\/p><\/blockquote>\n

Styling<\/p>\n

<style>
\ndiv {
\nbackground: cyan;
\nmargin: 15px 0px 15px 25px;
\nborder: 0px;
\n}<\/p>\n

div:focus {
\nborder: 1px;
\n}
\na {
\ntext-decoration: none;
\ncolor: red;
\n}<\/p>\n

a:visited {
\ncolor: rosybrown;
\n}<\/p>\n

a:hover {
\ncolor: green;
\ntext-decoration: overline;
\n}
\n<\/style><\/p><\/blockquote>\n

Pseudo elements<\/h2>\n

Keywords denoted by two colons (::) specified at the end of selector.<\/p>\n

I am trying to add the URL information after the Anchor content.<\/p>\n

div id=”myDiv”> <a href=”http:\/\/www.yahoo.com”> Dummy link<\/a> <\/div><\/p><\/blockquote>\n

Using the style and the pseudo element ::after<\/p>\n

a::after {
\ncontent: ” (” attr(href) “)”;
\n}<\/p><\/blockquote>\n

Brings the desired result<\/p>\n

\"Dummy<\/p>\n","protected":false},"excerpt":{"rendered":"

Pseudo classes State dependent styling, e.g Style a checkbox when it is in checked state. It is usually denoted by a preceding colon ‘:’ (without the quote). :active :checked :default :dir :disabled :empty E.g. <div id=”myDiv”> <a href=#> Dummy link<\/a> <\/div> Styling <style> div { background: cyan; margin: 15px 0px 15px 25px; border: 0px; } […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","hentry","category-personal"],"_links":{"self":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":0,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.samarthya.me\/wps\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}