Custom CSS to add text between answer choices? | XM Community
Skip to main content
Hello, Qualtrics Support suggested I ask for help here. We are using Qualtrics to do a sports movie "bracket" for the undergrads at our university. We have 32 single selection questions that present two answer choices each, horizontally, using the graphic of the movie cover (see image). We really want the word "versus" to appear between the two selection choices and were told we would need custom CSS to do it. Can anyone help? I'm not sure if the easiest thing is to add a third horizontal answer choice and somehow make it unselectable but with the word "versus," or to perhaps find a way to insert something between the two answer choices with the word "versus"? Hoping this is easy and some pro out there can tell us how!

!
Add this to the question-level HTML:



<style>

td.LabelContainer:nth-child(1)::after{

content: "vs";

position: absolute;

right: 50%;

top: 50%;

margin-top: -15px;

}

</style>



Just realized this only seems to work for the labels being above the image; you might want to play around with the numbers or something for the side label layout
This code does not seem to be working for me. Does anyone know why? Thank you!

Leave a Reply