<\/p>\n
Im Zuge eines Kundenprojektes war gefordert, vor jeder <h1>-\u00dcberschrift einen \/ zu setzen, der aber gr\u00f6\u00dfer als die \u00dcberschrift sein sollte und au\u00dferhalb des Textflusses, also weiter links als der ganze Text.<\/p>\n
Folgende L\u00f6sung habe ich daf\u00fcr gefunden:<\/p>\n
h1::before {content:\u201c\/\u00a0\u00a0\u00a0 \u201e; font-size: 2.2em; float: left; text-indent: -0.6em;}<\/em><\/p>\n Der \/ kann auch durch ein beliebiges Bild ersetzt werden. der float-Befehl sorgt daf\u00fcr, dass das Element davor in der H\u00f6he ausgemittelt ist und der text-indent f\u00fcr die Verschiebung aus dem Textfluss heraus.<\/p>\n Eine zweite Anforderung war, dass Aufz\u00e4hlungszeichen rot sind w\u00e4hrend der Text des Aufz\u00e4hlungspunktes grau sein sollte. Auch hier half der ::before-Befehl:<\/p>\n #li {list-style: none;}<\/em> Hier wird das Symbol f\u00fcr Aufz\u00e4hlungen zun\u00e4chst ausgeschaltet um dann durch einen Kreis (\\2022) ersetzt zu werden, in der gew\u00fcnschten Farbe und Gr\u00f6\u00dfe.<\/p>\n <\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=“4.9.4″ _module_preset=“default“ global_module=“272″][et_pb_column type=“4_4″ _builder_version=“4.9.4″ _module_preset=“default“][et_pb_post_nav prev_text=“Vorheriger Artikel“ next_text=“N\u00e4chster Artikel“ _builder_version=“4.9.4″ _module_preset=“default“ title_text_color=“#FFFFFF“ background_color=“#2E4770″ custom_padding=“0.5em|0.5em|0.5em|0.5em|true|true“][\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n\n","protected":false},"excerpt":{"rendered":" Im Zuge eines Kundenprojektes war gefordert, vor jeder <h1>-\u00dcberschrift einen \/ zu setzen, der aber gr\u00f6\u00dfer als die \u00dcberschrift sein sollte und au\u00dferhalb des Textflusses, also weiter links als der ganze Text. Folgende L\u00f6sung habe ich daf\u00fcr gefunden: h1::before {content:\u201c\/\u00a0\u00a0\u00a0 \u201e; font-size: 2.2em; float: left; text-indent: -0.6em;} Der \/ kann auch durch ein beliebiges Bild […]<\/p>\n","protected":false},"author":1,"featured_media":523,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n Im Zuge eines Kundenprojektes war gefordert, vor jeder <h1>-\u00dcberschrift einen \/ zu setzen, der aber gr\u00f6\u00dfer als die \u00dcberschrift sein sollte und au\u00dferhalb des Textflusses, also weiter links als der ganze Text.<\/p>\n\n\n\n Folgende L\u00f6sung habe ich daf\u00fcr gefunden:<\/p>\n\n\n\n h1::before {content:\u201c\/ \u201e; font-size: 2.2em; float: left; text-indent: -0.6em;}<\/em><\/p>\n\n\n\n Der \/ kann auch durch ein beliebiges Bild ersetzt werden. der float-Befehl sorgt daf\u00fcr, dass das Element davor in der H\u00f6he ausgemittelt ist und der text-indent f\u00fcr die Verschiebung aus dem Textfluss heraus.<\/p>\n\n\n\n Eine zweite Anforderung war, dass Aufz\u00e4hlungszeichen rot sind w\u00e4hrend der Text des Aufz\u00e4hlungspunktes grau sein sollte. Auch hier half der ::before-Befehl:<\/p>\n\n\n\n #li {list-style: none;}<\/em> Hier wird das Symbol f\u00fcr Aufz\u00e4hlungen zun\u00e4chst ausgeschaltet um dann durch einen Kreis (2022) ersetzt zu werden, in der gew\u00fcnschten Farbe und Gr\u00f6\u00dfe.<\/p>\n","_et_gb_content_width":"","footnotes":""},"categories":[21],"tags":[32],"class_list":["post-137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aus-meiner-arbeit","tag-css"],"_links":{"self":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":4,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":413,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions\/413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media\/523"}],"wp:attachment":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
#li:before {content:\u2019\\2022\u2032; display: block; position: relative; max-width: 0px; max-height: 0px; left: -10px; top: -0px; color: #b7000b; font-size: 20px;}<\/em><\/p>\n
#li:before {content:\u20192022\u2032; display: block; position: relative; max-width: 0px; max-height: 0px; left: -10px; top: -0px; color: #b7000b; font-size: 20px;}<\/em><\/p>\n\n\n\n