-4

I have HTML document, which i am not allowed to changing. In the other side, i have .css file with which i must to add text. I used the content property. The result must have text "NAME" before "input type="text" and text "NUMBER" before "input type="number".

The first one I already did with css code below in the link.

<div>
    <div>
        <div class="spacer"></div>
    </div>
</div>
<div>
    <div> 
        <input type="text" />
    </div> 
    <div>
        <input type="number" />
    </div>
</div>

My html code is here: http://www.beetxt.com/MZ2/ when I write here in the site it does show nothing.

And my CSS file: http://www.beetxt.com/Tdb/

But I dont know how to show text before " " without changing the HTML file. I can only use .css file, styles.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Jolek111
  • 89
  • 1
  • 7
  • Possible duplicate of [Insert HTML from CSS](http://stackoverflow.com/questions/4879719/insert-html-from-css) – derloopkat Apr 07 '16 at 19:15

1 Answers1

2

Given that we have no classes or ID to hook on to we must use nth-child statements:

div:nth-child(2) div:first-child::before {
  content: 'NAME';
  display: block;
}
div:nth-child(2) div:nth-child(2)::before {
  content: 'NUMBER';
  display: block;
}
.spacer:after {
  content: "SPACER";
}
<div>
  <div>
    <div class="spacer"></div>
  </div>
</div>
<div>
  <div>
    <input type="text" />
  </div>
  <div>
    <input type="number" />
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • This one is working fine for me, just one little request more. How to do, that is the words "name" and "number" does not show in the same line that is input ? – Jolek111 Apr 07 '16 at 19:19
  • I'm really sorry about my english, it is my third language. http://s9.postimg.org/s0nc6kp7j/pic1.png When i use your code i get version 1 on the picture, but i will need version 2 on the picture. Picture is in te link below: http://s9.postimg.org/s0nc6kp7j/pic1.png – Jolek111 Apr 07 '16 at 19:52