{"id":39768,"date":"2026-09-04T16:08:13","date_gmt":"2026-09-04T14:08:13","guid":{"rendered":"https:\/\/mainetcare.de\/?post_type=gartenschuppen&#038;p=39768"},"modified":"2026-09-04T16:44:36","modified_gmt":"2026-09-04T14:44:36","slug":"wie-kann-ich-hervorhebungen-auf-websites-gestalten-so-dass-es-aussieht-wie-von-einem-textmarker-markiert","status":"publish","type":"gartenschuppen","link":"https:\/\/mainetcare.de\/en\/gartenschuppen\/wie-kann-ich-hervorhebungen-auf-websites-gestalten-so-dass-es-aussieht-wie-von-einem-textmarker-markiert\/","title":{"rendered":"How can I format text on websites so that it looks like it's been highlighted with a highlighter?"},"content":{"rendered":"<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">mark<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">104deg<\/span>,\n    transparent <span class=\"hljs-number\">2%<\/span>, #ffe066 <span class=\"hljs-number\">4%<\/span>,\n    #ffe066 <span class=\"hljs-number\">94%<\/span>, transparent <span class=\"hljs-number\">96%<\/span>);\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">2px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">or<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">mark<\/span> { <span class=\"hljs-attribute\">position<\/span>: relative; <span class=\"hljs-attribute\">background<\/span>: none; }\n<span class=\"hljs-selector-tag\">mark<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">''<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">inset<\/span>: <span class=\"hljs-number\">2px<\/span> -<span class=\"hljs-number\">3px<\/span> <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ffe066cc<\/span>;\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">skewX<\/span>(-<span class=\"hljs-number\">4deg<\/span>) <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">0.4deg<\/span>);\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">2px<\/span>;\n  <span class=\"hljs-attribute\">z-index<\/span>: -<span class=\"hljs-number\">1<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">oder etwas subtiler<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">mark<\/span> { <span class=\"hljs-attribute\">position<\/span>: relative; <span class=\"hljs-attribute\">background<\/span>: none; }\n<span class=\"hljs-selector-tag\">mark<\/span><span class=\"hljs-selector-pseudo\">::before<\/span> {\n  <span class=\"hljs-attribute\">content<\/span>: <span class=\"hljs-string\">''<\/span>;\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">left<\/span>: -<span class=\"hljs-number\">2px<\/span>; <span class=\"hljs-attribute\">right<\/span>: -<span class=\"hljs-number\">2px<\/span>;\n  <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">1px<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">40%<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ffd60099<\/span>;\n  <span class=\"hljs-attribute\">z-index<\/span>: -<span class=\"hljs-number\">1<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-39768","gartenschuppen","type-gartenschuppen","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen\/39768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/gartenschuppen"}],"about":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/types\/gartenschuppen"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/en\/wp-json\/wp\/v2\/media?parent=39768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}