Apply two different styles to Wiget Titles along with a decorative line

Question

I am using the function below to to give the widget_title an array but I need a second array to handle a line I'm using next to the end of the title. How do I go about doing that?

I'm assuming I need to make another class and a second $title, but I've tried a hundred different ways and nothing.

add_filter('widget_title', my_title);

function my_title($title) {
  // Cut the title to 2 parts
  $title_parts = explode(' ', $title, 1);

  // Throw first word inside a span
  $title = '<span class="my_class">'.$title_parts[0].'</span>';

  // Add the remaining words if any
  if(isset($title_parts[1]))
    $title .= ' '.$title_parts[1];

  return $title;
}

CSS:

    .widget {
    margin: 0 0 1.5em;
    margin-top: 15px;
    width: 350px;
        overflow: hidden;
        background: #333846;


    box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-moz-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-webkit-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
}

.widget-area{
    width: 350px;
}

.widget-title {
    text-transform: uppercase;
    font-size: 1.22rem;
    margin-bottom: 15px;
    font-weight: bold;
} 

.widget-title {
    position: relative;
    padding: 23px 23px;
    z-index: 1;
}

.second_title .widget-title> span {
    background-color:#383e4d;
}



.first_title:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 28px;
     right: 1px;
    left: 30px;
    height: 3px;
    background-color: #fff;
    z-index: -1;
}


/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
}

.first_title {
    z-index:1;
    background: #383e4d;
    }
.second_title{
        color:#00d5c3;
        background: #383e4d;
        padding-right: 15px;
        z-index:-1;

}
.second_title::before{
    background: #383e4d;
    z-index: 1;
}

.widget-title{
        font-family: "GothamPro" !important;
        font-size:1.15em;
        color:#fff;
        background:#383e4d;
        padding-top:15px;
        padding-bottom:15px;
        z-index: 1;

   }
   .widget ul{

    }

Answer 1

This will wrap a span around the first word and also the remaining words in the title. Adjust the class names as necessary:

add_filter('widget_title', 'yourprefix_custom_title');
function yourprefix_custom_title( $old_title ) {

  $title = explode( " ", $old_title, 2 );

  if ( isset( $title[0] ) && isset( $title[1] ) ) {
    $new_title = "<span class='first'>$title[0]</span> <span class='second'>$title[1]</span>";
  } else {
     return;
  }

  return $new_title;
}

UPDATE

The following CSS will apply a color to the first word and also a color to the remaining words in the title as well as add a decorative line after.

  .widget-title {
    position: relative;
    display: block;
    overflow: hidden;
  }
  .widget-title:after {
    content: "";
    position: absolute;
    top: 50%;
    border-bottom: 1px solid #333333;
    width: 100%;
    margin: 0 .8em;
  }
  .widget-title span.first {
    color: red;
  }
  .widget-title span.second {
    color: green;
  }