{"id":1895,"date":"2016-07-19T14:47:23","date_gmt":"2016-07-19T19:47:23","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1895"},"modified":"2016-07-19T14:47:23","modified_gmt":"2016-07-19T19:47:23","slug":"css3-content-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3-content-property\/","title":{"rendered":"CSS3’s Content Property"},"content":{"rendered":"

CSS3’s content property allows for content to be added to the page from within the CSS. This\u00a0is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML files. The content property is used in conjunction with the :before<\/strong> and :after<\/strong> pseudo-selectors to make content appear before or after certain HTML elements.<\/p>\n

Let’s say you wanted a question mark to appear after every h1 element. Below is the h1 tag before the content property is applied to it, followed by the CSS for adding a question mark after the h1 element using the content property.<\/p>\n

\"Screen<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. h1:after<\/span>{<\/span><\/div><\/li>\n
  2.  <\/div><\/li>\n
  3. content<\/span>:<\/span> &quot;<\/span>?&quot;;<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    The result of the above CSS should be this:<\/p>\n

    \"Screen<\/p>\n

    You can add style rules to your pseudo selected element just like you would to any other element. You can change the color, font-size, and even the placement\u00a0(HOWEVER – you can only change the placement\/add margins or padding by defining the position of the pseudo-selected element as absolute. If you don’t take this step then any margins or padding you add will be ineffective).<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. h1:after<\/span>{<\/span><\/div><\/li>\n
    2. content<\/span>:<\/span> &quot;<\/span>?&quot;;<\/span><\/div><\/li>\n
    3. color<\/span>:<\/span> #ff0074<\/span>;<\/span><\/div><\/li>\n
    4. font-size<\/span>:<\/span> 50px<\/span>;<\/span><\/div><\/li>\n
    5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      \"Screen<\/p>\n

      You can even use the content property to insert an image into your HTML using a url() syntax, like this:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. h1:after<\/span>{<\/span><\/div><\/li>\n
      2. content<\/span>:<\/span>\u00a0url<\/span>(<\/span>insert\/path\/to\/image)<\/span>;<\/span><\/div><\/li>\n
      3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

         <\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        CSS3’s content property allows for content to be added to the page from within the CSS. This\u00a0is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2757,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,174,175,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1895"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1895"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2757"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}