Qualtrics (HTML/CSS/Java): How to create a circle with a line in the middle, text above and below the line

Question

Little experience with creating shapes/these languages.

I creating a survey on Qualtrics and need to put text into circles.

1. One circle is simple enough, and I found previous discussions to help me with it, but for clarity, see the image below.

Right now, I am using this code for the simple circle, will change it to match the second circle.

 .circle { width:500px; height:500px; border-radius:250px; font-size:50px; color:#fff; line-height:500px; text-align:center; background:#000 }

 <div class="circle">Text</div>

2. The second circle needs a line in the middle, to divide to text inputs, one above the line, a different one below the line.

Simple Circle

Circle with two text inputs

Answer 1

I used linear-gradient for the "background" (the middle line) and flex for text positioning

 .circle { display: flex; flex-direction: column; justify-content: space-evenly; width: 200px; height: 200px; border-radius: 250px; font-size: 30px; color: black; text-align: center; background: #000; border: solid black 1px; background: linear-gradient(to top, white 49%, black 50%, white 50%), linear-gradient(to bottom, white, black 60%, white 50%); }

 <div class="circle"> <div>Text</div> <div>Text</div> </div>

as imperyum mentioned, you can achieve the line with before / after pseudo elements

 .circle { position:relative; display:flex; flex-direction:column; justify-content:space-evenly; width:200px; height:200px; border-radius:50%; font-size:30px; color:black; text-align:center; background:#000; border:solid black 1px; background: white }.circle:after { content:""; width:100%; background-color:black; height:1px; position:absolute; top:50%; }

 <div class="circle"> <div>Text</div> <div>Text</div> </div>