How to make CSS apply to only a portion of the link_to text?


Tags: html,css,ruby-on-rails,link-to

Problem :

A) This is the working link:

<%= link_to "+ Start a club", account_setup_path(id: :start_a_club) %>

B) This is what I want it to look like:

<a class="list-group-item" href="#"><i class="fa fa-plus fa-fw hot-pink"></i>&nbsp; Start a club</a>

How do I re-write A to get the correct CSS (ie. so the '+' is hot-pink)?

Thanks!



Solution :

<%= link_to account_setup_path(id: :start_a_club), class: 'list-group-item' do %>
  <i class="fa fa-plus fa-fw hot-pink"></i>&nbsp; Start a club
<% end %>

    CSS Howto..

    How to divide a border into 4 equal parts?

    How to add a style only to certain elements of a list via CSS

    how do I center this image, without touching the HTML

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to select col id using jquery to hide via css

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How to create a pop-up div on mouse over and stay when click

    How do I prevent sliced images in the CSS background from sitting on each other?

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    Show/hide css class by url parameter with php

    Basic CSS Question: How to specify height of background image of div?

    How to fix text with limited height and absolute position overflows

    Google Apps Script How to link to JS or CSS file on Google Drive

    How to count the number of correct answers using Javascript?

    How to make div blocks not floating using CSS?

    How to make a responsive scrollbar?

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How to keep two divs and images inside them to be side by side on browser resize?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    HTML/CSS How to connect a list to h tag and word-spacing

    Show different forms using buttons with animation

    How to put space between figure in image?

    How to stop text in div pushing other divs down the page?

    How to insulate HTML widget from external CSS

    Only show text on image when you hover - wordpress theme

    How to make google maps fit the mobile device screen

    How to make a braille interface for our website

    Google Chrome Package Apps : How to make transparent rounded background like google hangout app?