Több kérdést kaptam már arról, hogy meg lehet-e csinálni azt, hogy a címkék vesszővel vagy ponttal vagy valamivel el legyenek választva egymástól. Ehhez a G-Portáltól kértem segítséget, mert ha valaki sosem tanulta a kódolást, akkor ugye nem tudhat mindent. És én, amit tudok azt magamtól tudom, nem tanította senki, tehát ebben segítséget kellett kérnem. Kaptam is egy alap kódot, amit én már kicsit át is variáltam, hogy “majdnem” tökéletes lehessen.

Csak egy kis CSS-re van hozzá szükség és semmi másra. Az elválasztáshoz itt is a FontAwesome ikonok között választhattok egyet, ha a pont nem felelne meg.

/* címkék */
.blogtags {
font-size: 0px!important;
text-align: left;
margin: -45px 0px 0px 30px!important;
position: absolute;
width: 750px;
background: transparent;
padding: 10px 0 7px 10px;
}
.blogtags a:after { /* itt adjátok meg, hogy mi válassza el a címkéket egymástól */
content: "\f111";
font-size: 6px;
font-family: FontAwesome;
margin-left: 7px;
margin-top: 0px;
position: absolute;
}
.blogtags a:last-child:after {
content: "";
margin: 0;
}
.blogtags:before { /* ikon a címkék előtt */
font-size: 14px;
font-weight: normal !important;
font-style: normal !important;
color: #ffffff;
background: #D28E28;
padding: 10px;
font-family: FontAwesome;
content: "\f02c";
margin-left: -40px !important;
margin-top: -10px;
position: absolute;
}
.blogtags a:link, .blogtags a:visited {
font-size: 13px;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-style: normal !important;
color: #3B3B3B !important;
padding: 4px;
margin-right: 10px;
}
.blogtags a:hover {
color: #ffffff !important;
background: #AE2010;
}

418 megtekintés