Wyciąganie tekstu z label

pytanie zadane 13 stycznia 2016 w HTML i CSS przez tirex Gaduła (4,430 p.)

Czesć

Ktoś mi powie jak za pomocą css wyciagnąc z tego kodu słowo:HTML5.

Chcę ,żeby wychodził z dołu diva poprzez najechanie na niego.

2 odpowiedzi

odpowiedź 13 stycznia 2016 przez Comandeer Guru (601,510 p.)

attr(nazwa-atrybutu) i to wsadzić do content jakiegoś pseudoelementu.

komentarz 13 stycznia 2016 przez tirex Gaduła (4,430 p.)

No to robiłem tak

[data-sentence]:before{
content:attr(data-sentence);
}

komentarz 13 stycznia 2016 przez Comandeer Guru (601,510 p.)

Nie da się podmienić treści elementu w CSS. Można nadać treść pseudolementom ::before lub ::after.

komentarz 13 stycznia 2016 przez tirex Gaduła (4,430 p.)

To wg Ciebie jak to by wyglądało?

komentarz 13 stycznia 2016 przez Comandeer Guru (601,510 p.)

Jak komentowałem, to nie miałeś :before w selektorze. W takiej formie, w jakiej teraz pokazałeś, powinno działać, hm…

komentarz 13 stycznia 2016 przez tirex Gaduła (4,430 p.)

To zaraz prześle cały kod.

odpowiedź 13 stycznia 2016 przez tirex Gaduła (4,430 p.)

html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<section class="abc">

</section>
</body>
</html>

CSS

body {
margin: 0;
padding: 0;
}

form {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   width: 100%;
}

label {
text-indent: -99999999px;
}

form > ul > li{
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}

input[type=checkbox] {
opacity: 0;
}

input[type=checkbox] + label[for=checkbox_A] {
   background-image: url(../images/A.png);
   background-repeat: no-repeat;
   background-size: 100%;
   height: 250px;
   width: 250px;
   display:-webkit-inline-box;
   display:-webkit-inline-flex;
   display:-ms-inline-flexbox;
   display:inline-flex;
   padding:0;

}

input[type=checkbox] + label[for=checkbox_B] {
   background-image: url(../images/B.png);
   background-repeat: no-repeat;
   background-size: 100%;
   width: 250px;
   height: 250px;
   display:-webkit-inline-box;
   display:-webkit-inline-flex;
   display:-ms-inline-flexbox;
   display:inline-flex;
padding: 0;

}

input[type=checkbox] + label[for=checkbox_C] {
   background-image: url(../images/C.png);
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center center;
   height: 250px;
   width:250px;
   display:-webkit-inline-box;
   display:-webkit-inline-flex;
   display:-ms-inline-flexbox;
   display:inline-flex;
   padding: 0;


}

input[type=checkbox]:checked + label {
   border: 3px solid black;
   border-radius: 20px;
}
[data-sentence]::after{
   content:attr(contenteee);
}

button[type=submit] {
   width:330px;
   height: 70px;
   background-color: #000;
   color: #fbd800;
   font-size: 2em;
   border: 0;
   position: relative;



}

button[type=submit]:after {
   content: '';
   border-width: 25px;
   border-color:transparent #000 #000 transparent;
   border-style: solid;
   position: absolute;
   top: 10px;
   left: 305px;
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

button[type=submit]:hover{
background-color: #fbbc00;
color:#000;
}

button[type=submit]:hover:after {
   border-color: transparent #fbbc00 #fbbc00 transparent;
   color: #000;

}